3

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,
        }
    }
});​

私の日付範囲は 2011 年 10 月 23 日から始まります。

ただし、レンダリングされるグラフは常に 2011 年 10 月 22 日から開始されます。

代替手段は最小値と最大値を使用することです。

しかし、ティック間隔も等間隔にしたいです。以下は、グラフ内の日付ラベルを均等に配置することで達成しようとしていることです。

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 メソッドで既存の最小値、最大値を使用するオプションを設定しても、グラフはこれらの値を尊重しません。軸オプションの 'pad' 属性は、DateTimeAxisRenderer では機能しません。

開始日から常に 1 ティックがあります。誰かが私の間違いを指摘できれば本当に助かります。ありがとう。

4

2 に答える 2

3

pad" "、" padMin"、および " PadMax" オプションを試してみましたが、" $.jqplot.DateAxisRenderer" プラグインはこれらのオプションの使用を許可していないようです。

これはフィドルを使用してpadいますが、 " " は使用していません$.jqplot.DateAxisRenderer: http://jsfiddle.net/33jEG/4/

最善の方法はmin / maxオプションを使用することです、申し訳ありません

于 2012-10-27T08:29:11.447 に答える
2

日付軸のパディングで同様の問題に直面していたので、最終的にmin maxを使用して範囲を設定し、 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
    },
   }
}
于 2014-04-24T11:10:11.473 に答える