0

3 つのデータ ポイントを使用して縦棒グラフをセットアップします。各 x 値は datetime 値であり、1 日内の異なる時間です。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2013, 5, 1, 0, 0, 0), 1], 
                [Date.UTC(2013, 5, 1, 2, 0, 0), 1], 
                [Date.UTC(2013, 5, 1, 4, 0, 0), 1]
            ]
        }]
    });
});

これは私の例です: http://jsfiddle.net/CqkUc/1/

私の問題は、すべての列のツールチップに同じ日付が表示され、異なる時間を表示したいということです。ツールチップ フォーマッタ関数を使用できることはわかっていますが、xAxis 単位を強制的に 1 時間にする方法があると思います。

4

2 に答える 2

0

ツールチップ フォーマッタとdateFormatを使用して、表示される時間をカスタマイズできます。

于 2013-10-17T09:55:45.797 に答える
0

dateTime 軸とツールヒントの各レベルのフォーマットを設定できます。デフォルトでは、軸の形式はツールチップの形式とは異なります。デフォルト値については、http ://api.highcharts.com/highcharts#tooltipおよびhttp://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormatsを参照してください。理由はわかりませんが、ツールチップのデータ ポイントに日の形式を使用しているようです。時間要素がすべて 0 の最初のものには意味がありますが、他の要素には意味がありません。

http://jsfiddle.net/bhlaird/CqkUc/2/

  $('#container').highcharts({
        chart: {
            type: 'column'
        },
        tooltip: {
            dateTimeLabelFormats : {
                day: '%H:%M',
            }
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H:%M'
            }
        },
        series: [{
            data: [
                [Date.UTC(2013, 5, 1, 0, 0, 0), 1],
                [Date.UTC(2013, 5, 1, 2, 0, 0), 1],
                [Date.UTC(2013, 5, 1, 4, 0, 0), 1]
            ]
        }]
    });
于 2013-10-16T20:52:59.573 に答える