jqPlot日期轴 - 在错误的日子绘制的条形图?

时间:2011-11-14 18:43:45

标签: jquery jqplot

这里很简单:

   var dataHits = [['2011-10-16',1],['2011-11-05',7],['2011-11-06',1],['2011-11-09',2],['2011-11-12',5]];
   var plot1 = $.jqplot('chartHits', [dataHits], {
      title:'Zobrazenia profilu spolu',
      seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {            
            barPadding: 0,      // number of pixels between adjacent bars in the same
                                // group (same category or bin).
            barMargin: 0,      // number of pixels between adjacent groups of bars.
            barDirection: 'vertical', // vertical or horizontal.
            barWidth: 10

        }                
            },
      axes:{
        xaxis:{                    
          renderer:$.jqplot.DateAxisRenderer,
          min: '2011-10-15',
          max: '2011-11-13',
          tickInterval: "2 day",
          tickOptions:{
            formatString:'%d.%m'
          }          
        },
        yaxis:
        {
          min: 0,
          tickInterval: 1
        }        
      },
      highlighter: {
        show: true,
        sizeAdjust: 7.5
      },
      cursor: {
        show: false
      }
   });

但是生成的图形是错误的 - 第一个值被绘制好 - 在2011年10月16日,但是所有其他值(条形图)定位不正确 - 比它们应该更早一天(即使它们的“工具提示”突出显示是正常的,它们也是在x轴上只是在错误的位置)。知道如何解决这个问题吗?

见图: enter image description here

1 个答案:

答案 0 :(得分:1)

我认为一般来说,在处理条形图时,你应该总是使用刻度线来获得更好的情节。 同样针对您的问题,您在使用this approach, please see here.时获得了有趣的结果。在这里您需要记住,如果您不想在dataHits中未指定的日期显示任何内容,则还需要提供它们只给它们0的值。

当您同时使用ticksdateAxisRenderer功能时,您获得了有趣的结果(希望这是您想要的)。 This I show in the following sample.此处显示读数之间显示时间距离的间隙,并正确绘制所有值。同样重要的是要注意minmaxtickInterval没有任何效果,因为我们使用刻度线。

BTW:如果您仍想在图表周围留下一些空白,可以申请the approach presented in EDIT of this answer