我正在使用 jqPlot 创建条形图,但遇到了一些问题。
问题 1:图表上的第一个和最后一个条形图被截断。仅显示一半
问题 2:我不希望我的数据点跨越整个 x 轴。是否不能让数据跨越整个 x 轴?
例如:这就是现在所做的。
这是我传递给它的数据
var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]]
这是我正在使用的jquery。
// Plot chart
function PlotChart(chartData, numberOfTicks) {
$.jqplot.config.enablePlugins = true;
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barMargin: 15,
barDirection: 'vertical',
barWidth: 50
},
pointLabels: { show: true }
},
axes: {
xaxis: {
pad: 0, // a factor multiplied by the data range on the axis to give the
numberTicks: numberOfTicks,
renderer: $.jqplot.DateAxisRenderer, // renderer to use to draw the axis,
tickOptions: {
formatString: '%b %#d' // format string to use with the axis tick formatter
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
最佳答案
从您希望绘图的外观来看,如果您改用 CategoryAxisRenderer 而不是 DateAxisRenderer,将为您省去很多麻烦。与真实的时间序列相比,CategoryAxisRenderer 更擅长显示离散的数据分组。
var axisDates = ["Jan 19", "Jan 20", "Jan 21"]
var chartData = [2.61,5.00,6.00]
$.jqplot.config.enablePlugins = true;
var plot2 = $.jqplot('chart2', [chartData], {
title: 'Some Plot',
seriesDefaults:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barMargin: 15,
barDirection: 'vertical',
barWidth: 50
},
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: axisDates
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
关于jquery - jqPlot 条形图出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9057765/