jQuery jqPlot 条形图有问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9057765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Having problems with jqPlot bar chart
提问by chobo
I'm using jqPlot to create a bar graph, but I ran into a few problems.
我正在使用 jqPlot 创建条形图，但遇到了一些问题。
Problem 1:The first and last bars on the graph are cut off. Only half of it is displaying
问题 1：图形上的第一个和最后一个条形被截断。只显示一半
Problem 2:I don't want my data points to span the entire x-axis. Is there to not have the data span the entire x-axis?
问题 2：我不希望我的数据点跨越整个 x 轴。是否没有数据跨越整个 x 轴？
ex:This is what is does right now.
例如：这就是现在所做的。
This is the data I am passing into it
这是我传递给它的数据
var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]]
This is the jquery I am using.
这是我正在使用的 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
}
});
}
回答by Mark
From how you want your plot to look, you'll save yourself a lot of trouble if you switch to using a CategoryAxisRenderer instead of the DateAxisRenderer. The CategoryAxisRenderer is a lot better at displaying discreet groupings of data as opposed to a true time series.
从您希望绘图的外观来看，如果您切换到使用 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
}
});
回答by PriorityMark
The DateAxisRenderer is really meant for line graphs, not bar graphs. When you combine it with bar graphs, it just doesn't work right. The idea / goal of the DateAxisRenderer is to make a linear / accurate time graph across a date/time. That way, if you miss a date entry, it will still be drawn to scale over time. Check their examples on the DateAxisRenderer here: http://www.jqplot.com/tests/date-axes.php
DateAxisRenderer 真正适用于折线图，而不是条形图。当您将其与条形图结合使用时，它就无法正常工作。DateAxisRenderer 的想法/目标是在日期/时间上制作线性/准确的时间图。这样，如果您错过了日期输入，它仍会随着时间的推移按比例绘制。在此处查看 DateAxisRenderer 上的示例：http://www.jqplot.com/tests/date-axes.php
What you're wanting to use is the CategoryAxisRenderer. You can then just override / create your own tick label renderer and be good to go. Normally you wouldn't want to append extra empty items to an item, especially if they're empty, however, if you do, just append them to your data array.
您要使用的是 CategoryAxisRenderer。然后，您可以覆盖/创建自己的刻度标签渲染器，然后一切顺利。通常，您不希望将额外的空项目附加到项目中，尤其是在它们为空的情况下，但是，如果您这样做，只需将它们附加到您的数据数组中即可。
Here's a jsfiddle doing what you want: http://jsfiddle.net/fordlover49/JWhmQ/
这是一个 jsfiddle 做你想做的事：http: //jsfiddle.net/fordlover49/JWhmQ/
Note that you may want to look at the manage resources section to verify what files you need to reference (in addition to the jquery file).
请注意，您可能需要查看管理资源部分以验证您需要引用哪些文件（除了 jquery 文件）。
Here's the javascript in case jsfiddle acts up:
这是 jsfiddle 起作用的 javascript：
$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];
// add a custom tick formatter, so that you don't have to include the entire date renderer library.
$.jqplot.DateTickFormatter = function(format, val) {
// for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
val = (new Date(val)).getTime();
format = '%b %#d'
return $.jsDate.strftime(val, format);
};
function PlotChart(chartData, extraDays) {
// if you want extra days, just append them to your chartData array.
if (typeof extraDays === "number") {
for (var i = 0; i < extraDays; i++) {
var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date
var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date
chartData.push([newDate, 0]);
}
}
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barWidth: 50
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
pad: 1,
// a factor multiplied by the data range on the axis to give the
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%b %#d',
formatter: $.jqplot.DateTickFormatter
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData, 3);
回答by kendokamax
Here is a simple hack that I used to show a margin.
这是我用来显示边距的简单技巧。
I create a starting date and an ending date which are respectively one day before and one day after the contents I want to show.
我创建了一个开始日期和一个结束日期，分别是我想要显示的内容的前一天和一天后。
For example if I want to show the month of January 2012
例如，如果我想显示 2012 年 1 月的月份
var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012
Then I declare my own DateTickFormatterwhere I will not printout these two dates.
然后我声明我自己的DateTickFormatter，我不会打印这两个日期。
$.jqplot.DateTickFormatter = function(format, val) {
if (!format) {
format = '%Y/%m/%d';
}
if(val==startingDate.getTime() || val==endingDate.getTime()){
return "";
}else{
return $.jsDate.strftime(val, format);
}
};
Then in the xaxisI put the following options:
然后在xaxis我把以下选项：
xaxis : {
renderer:$.jqplot.DateAxisRenderer,
min:startingDate,
max:endingDate,
tickInterval:'1 day'
}
