个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个带有 jqplot 内置 slider 的柱形图，但 x 轴标签未与图表对齐；我希望它们位于条形下方的中心
当有七个柱时，问题就很严重:http://prooffreader.kissr.com/chart/shorter.html
当有 26 个时，问题就很严重了:http://prooffreader.kissr.com/chart/expt.html
这是该页面的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Column graph with slider</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="css/demos.css">
<!-- These were the files required to draw column graphs -->
<link class="include" rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<!-- -->
<script>
//start value for year
var start_year=1880;
//end value for year
var end_year=2012;
//function that gets called on loading the page
$(document).ready(function() {
generate_column_chart(start_year);
});
//function to plot the graph on receiving data
function plot_graph(yearData)
{
$("#column_graph_div").html("");
var ticks=['a','b','c','d','e','f','g'];
var plot1 = $.jqplot("column_graph_div",[yearData], {
seriesColors:['#01a4ef'], // color of bars
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
fillToZero : true,
barPadding : 0,
barWidth : 20 //
}
},
series : [ {
label : 'total'
}
],
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks,
tickOptions : {
fontFamily: 'Arial, Sans',
fontSize: '9pt'}
},
yaxis : {
pad : 1.5,
min : 0,
ticks: [[0,'0'],[20,'20'],[40,'40']],
tickOptions : {
fontFamily: 'Arial, Sans',
fontSize: '10pt'
}
}
}
});
}
//function to generate column chart on slide movement
function generate_column_chart(year)
{
var input_year="y"+year;
//alert(input_year);
$.ajax({
url: "json/data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
var json = $.parseJSON(data);
$.each(json, function(field, value) {
//alert("field:"+field);
if(input_year.trim()==field.trim())
{
plot_graph(value);
}
});
}
});
}
//function that gets called on slider move
$(function() {
$( "#slider" ).slider({
value:start_year,
min: start_year,
max: end_year,
step: 1,
stop: function( event, ui ) {
generate_column_chart(ui.value);
$( "#year" ).html( "" + ui.value );
}
});
$( "#year" ).html( "" + $( "#slider" ).slider( "value" ) );
});
</script>
<强>
最佳答案
类别轴渲染器的正常方法是将数据成对传递。
您在 yearData 中发送类似的内容:
[2.58, 0.75, 1.59, 6.23, 6.32]
相反，您想发送如下内容:
[['a', 2.58], ['b', 0.75], ['c', 1.59], ['d', 6.23]]
然后还省略 x 轴上 ticks 属性的使用。我认为该属性仅适用于数字比例。您有字符串(“分类”)，我认为这是刻度线未对齐的原因。
关于javascript - jqplot柱形图x轴类别标签未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22234581/
26
4
0
我想 reshape pandas 数据框， 我有这种格式的 csv 文件 #Result;ID;Date;Events;type 12;1240422;10/01/2017 10:10;1;Item
我有一个现有的 Highcharts ，我需要在其上突出显示单个列。 这是一个已经存在了一段时间的百分位图，我对 Highcharts 仍然很陌生，但我在这里看到了一个类似的问题，这个问题虽然涉及堆叠
我有一个多系列柱形图(在本例中为 3 个)。我想在所有系列的列上覆盖一条线。所以我用相同的列系列数据创建了另外 3 个 Line 系列。当只有一列和一行系列时，这非常有效。对于多个系列，线条呈现在类别
我是一名优秀的程序员,十分优秀！