2012-10-26 84 views
3

我面臨的問題是jqplot,Date是X軸。Jqplot日期渲染器填充問題

我的代碼是

var data = [ 
    ["10/23/2011", 266522], 
    ["10/24/2011", 170287], 
    ["10/25/2011", 2175], 
    ["10/26/2011", 1794] 
]; 

$.jqplot('chart1', [data], { 

    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
     } 
    } 
});​ 

我的日期範圍從23日開始2011年10月

但是,總是呈現從22日開始2011年10月

圖我知道替代品是使用最小和最大。

但我也希望滴答間隔均勻分佈。以下是我試圖通過在圖表中均勻分隔日期標籤來實現的內容。

var chart = $('chart1'); 
chart.resetAxesScale(); 
var tickInterval = Math.ceil(chart._plotData[0].length/chart.axes.xaxis._numberTicks); 
    var newTickInterval = tickInterval * 24 * 60 * 60 * 1000; 
    chart.axes.xaxis.tickInterval = newTickInterval; 
chart.replot(); 

這將基本上平衡tickIntervals和x軸不會混亂。

我甚至嘗試用最小值和最大值設置圖表,並使用上面的代碼均勻地分隔日期,但我沒有運氣。最小值和最大值重置爲「chart.resetAxesScale()」。即使我在resetAxesScale方法中使用現有的min,max選項,圖形也不會遵守這些值。 軸選項中的'pad'屬性不適用於DateTimeAxisRenderer。

總是從開始日期開始有一個勾號。 如果有人能指出我的錯誤,會非常有幫助。 謝謝。

回答

3

我試着用「pad」,「padMin」和「PadMax」選項來打,但是似乎「$.jqplot.DateAxisRenderer」插件不允許使用這些選項。

下面是使用pad但小提琴無「$.jqplot.DateAxisRenderer」:http://jsfiddle.net/33jEG/4/

最好的辦法是使用min/max選項,對不起

+0

的絕對最小使用'$ .jqplot.DateAxisRenderer'的情況下工作。在我的例子中,我有多個系列,這就是我爲了擺脫左側'min:dataObj.array [0] [0] [0]'的空間而添加的。在OP的情況下,它將是'xaxis'中的'min:data [0] [0]' – Pierre

2

我正面臨着類似的問題對日線填充,所以最後使用最小最大值來設置範圍並使用momentjs庫來調整範圍以解析日期。希望能幫助到你。

var padding = 0.05; 
var min = moment(data[0][0]); 
var max = moment(data[data.length - 1][0]); 
var pad = (max.valueOf() - min.valueOf()) * padding; 
min = moment.unix((min.valueOf() - pad)/1000); 
max = moment.unix((max.valueOf() + pad)/1000); 

<...> 

axes: { 
    xaxis: { 
    min: min.format("YYYY-MM-DD HH:mm:ss"), 
    max: max.format("YYYY-MM-DD HH:mm:ss"), 
    renderer: $.jqplot.DateAxisRenderer, 
    rendererOptions: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer 
    }, 
    } 
}