2012-08-09 43 views
5

我想使用jQPlot和将呈现的轴线为一系列的日期值 - jQPlot的原始包装可以是字体的位置:为什么jQPlot dateAxisRenderer工作不正确?

http://www.jqplot.com/

http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html

问题是这样的:

一)x轴的左侧没有开始,也将表明,我不希望看到值

b)只是在相同的问题上有更多不需要的号码

c)我想在xaxis上有所有的日子1 2 3 4 5 ...不是31 3 6 9 ...

d)是可以设置一种偏移底部(只是一点点...)

截图: Picture from current status

我的代码:

$.jqplot('chartdiv', [ 
    [ 
     ['2012-08-01', 0], 
     ['2012-08-02', 0], 
     ['2012-08-03', 0], 
     ['2012-08-04', 0], 
     ['2012-08-05', 0], 
     ['2012-08-06', 0], 
     ['2012-08-07', 1], 
     ['2012-08-08', 0], 
     ['2012-08-09', 6], 
     ['2012-08-10', 0], 
     ['2012-08-11', 0], 
     ['2012-08-12', 0], 
     ['2012-08-13', 0], 
     ['2012-08-14', 0], 
     ['2012-08-15', 0], 
     ['2012-08-16', 0], 
     ['2012-08-17', 0], 
     ['2012-08-18', 0], 
     ['2012-08-19', 0], 
     ['2012-08-20', 0], 
     ['2012-08-21', 0], 
     ['2012-08-22', 0], 
     ['2012-08-23', 0], 
     ['2012-08-24', 0], 
     ['2012-08-25', 0], 
     ['2012-08-26', 0], 
     ['2012-08-27', 0], 
     ['2012-08-28', 0], 
     ['2012-08-29', 0], 
     ['2012-08-30', 0], 
     ['2012-08-31', 0] 
    ] 
], { 
    title: 'Downloadstatistik', 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickOptions: { 
       formatString: '%#d', 
       tickInterval: '1 month' 
      }, 
      pad: 1.0 
     }, 
     yaxis: { 
      tickOptions: { 
       formatString: '%.0f' 
      }, 
      min: 0 
     } 
    } 
}); 

回答

10

开始时,你应该尝试设置你的tickInterval为“1日” :)

在此之后,关键是要设置为根据您的日期数组的第一个和最后一个值的x轴的最小值和最大值。

下面是一个例子:

var timeline = [[ 
    ['2012-08-01', 0], ['2012-08-02', 0], ['2012-08-03', 0], 
    ['2012-08-04', 0], ['2012-08-05', 0], ['2012-08-06', 0], 
    ['2012-08-07', 1], ['2012-08-08', 0], ['2012-08-09', 6], 
    ['2012-08-10', 0], ['2012-08-11', 0], ['2012-08-12', 0], 
    ['2012-08-13', 0], ['2012-08-14', 0], ['2012-08-15', 0], 
    ['2012-08-16', 0], ['2012-08-17', 0], ['2012-08-18', 0], 
    ['2012-08-19', 0], ['2012-08-20', 0], ['2012-08-21', 0], 
    ['2012-08-22', 0], ['2012-08-23', 0], ['2012-08-24', 0], 
    ['2012-08-25', 0], ['2012-08-26', 0], ['2012-08-27', 0], 
    ['2012-08-28', 0], ['2012-08-29', 0], ['2012-08-30', 0], 
    ['2012-08-31', 0] 
]]; 
var plot = $.jqplot('chartdiv', timeline, { 
    title: 'Downloadstatistik', 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickOptions: { formatString: '%#d' }, 
      tickInterval: '1 day', 
      min: timeline[0][0][0], 
      max: timeline[0][timeline[0].length-1][0] 
     }, 
     yaxis: { 
      tickOptions: { formatString: '%.0f' }, 
      min: 0 
     } 
    } 
}); 

而且我觉得不需要垫。

编辑(新的jsfiddle加):

你可以在这里测试此示例代码:http://jsfiddle.net/JhHPz/4/

+0

那么确定这个工程。但在底线(xaxis jqplot并没有显示所有天数为1,3,6,9,而不是1,2,3,4,5,6 ......数据中的“点”被标记为... – spotlr

+0

对不起,我当然错过点击时复制/粘贴jsFiddle链接。 我已经更新了我的答案一个新的。 另外,什么意思当你说: ''从数据的“点”被标记''? – TwystO

+0

谢谢,现在效果很好;) – spotlr