0

jqPlot を使用して時系列データを説明しています。同時に、x 軸 (時間軸) の目盛り間隔を制御するドロップダウン メニューがあります。ティック間隔は動的に変更できますが、最後のティックは常に範囲外です。

たとえば、x 軸の上限はDec 1 1961、開始日はJan 2 1961、間隔は3 monthです。次に、軸の最後の目盛りはJan 2 1962であり、実際の上限ではありません。したがって、私の質問は、ティック間隔を x 軸の境界内でのみ機能させる方法です (外挿前の上限と比較するなど)。ありがとう!

これが私のプロットのデモです。

自分自身をもう少しうまく説明してみてください。

  1. x 軸の最後の数値は、配列 x_date2[300] の最後の要素である必要があります。最初の日付 x_date[0] と最後の日付の差をティック間隔の値で割ることができれば、すべて問題ありません。
  2. そうでない場合、上限である最後の要素を除いて、他の目盛り間の間隔は、ドロップダウンの目盛り間隔の選択によって制御する必要があります。

JS:

var x_water = [data are available on JSFIDDLE]
var x_date2 = [data are available on JSFIDDLE]
var x_date2_len = x_date2.length;
var paired = [];

for (var i = 0; i <= x_date2_len; i += 1) {
    paired.push([x_date2[i], x_water[i]]);
}

$('#calc1').click(function (range_interval) {
    var range_interval = $("#display_interval_1").val();
    createplot1(range_interval);
});

function createplot1(range_interval) {
    $.jqplot.config.enablePlugins = true;
    $('#chart1').empty();
    $.jqplot('chart1', [paired], {
        seriesDefaults: {
            showMarker: false,
            pointLabels: {
                show: false
            }
        },
        series: [{
            label: 'Water Concentrations'
        }],
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString: '%#m/%#d/%Y',
                    angle: -30
                },
                min: x_date2[0],
                max: x_date2[300],
                tickInterval: range_interval,
                label: 'Date',
                pad: 0
            },
            yaxis: {
                label: 'Water Total (μg/L)',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                pad: 0
            }
        },
        legend: {
            show: true,
            location: 'nw',
            placement: 'inside',
            fontSize: '11px'
        }
    })
}
4

1 に答える 1

0

関数 createplot1 で、max: x_date2[300] を max: x_date2[200] に変更しました。効果を確認するためにこの数値をランダムに選択したところ、希望どおりに機能するようになりました。

于 2013-03-21T22:16:37.760 に答える