有jqPlot条形图的问题

我正在使用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 } }); } 

Answer 1

根据您希望绘图的外观，如果切换到使用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 } }); 

Answer 2

DateAxisRenderer实际上是用于折线图，而不是条形图。 将它与条形图组合使用时，它无法正常工作。 DateAxisRenderer的想法/目标是在日期/时间内制作线性/准确的时间图。 这样，如果您错过了日期条目，它仍将按时间缩放。 在这里查看DateAxisRenderer上的示例： http ：//www.jqplot.com/tests/date-axes.php

你想要使用的是CategoryAxisRenderer。 然后，您可以覆盖/创建自己的刻度标签渲染器并且很好。 通常，您不希望将额外的空项附加到项目中，特别是如果它们是空的，但是，如果这样做，只需将它们附加到数据数组即可。

这是一个jsfiddle做你想要的： http ： //jsfiddle.net/fordlover49/JWhmQ/

请注意，您可能需要查看manage resources部分以validation需要引用的文件（除了jquery文件之外）。

以下是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&nbsp%#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); 

Answer 3

这是一个简单的黑客，我曾经显示一个边缘。

我创建了一个开始日期和结束日期，分别是我想要显示的内容的前一天和后一天。

例如，如果我想显示2012年1月

 var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011 var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012 

然后我声明我自己的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); } }; 

然后在xaxis我提出以下选项：

 xaxis : { renderer:$.jqplot.DateAxisRenderer, min:startingDate, max:endingDate, tickInterval:'1 day' }