0

毎日の時間の範囲を表示するためにグラフを作成しようとしています。つまり、次のようなものを作りたいと思います: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/ columnrange/ですが、温度の代わりに時間情報が含まれています。このコード ( https://paste.maxux.net/x61fKlc ) を作成しましたが、システムはバーを描画しません。

誰かがこれを行う方法を説明できますか? 御時間ありがとうございます。

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },
        xAxis: {
            categories: ['01/01/2000', '02/01/2000', '03/01/2000', '04/01/2000', '05/01/2000', '06/01/2000', '07/01/2000']
        },
        yAxis: {
        type: 'datetime',
            title: {
                text: 'Heure'
            }
        },
        plotOptions: {
            columnrange: {
                    dataLabels: {
                            enabled: true,
                            formatter: function () {
                    return (this.y.getHours()+1) + ':' + (this.y.getMinutes());
                            }
                    }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Working hours',
            data: [
                            [Date(0,0,0, 12,00,00), new Date(0,0,0, 15,00,00)],
                            [Date(0,0,0, 13,00,00), new Date(0,0,0, 16,00,00)],
                            [Date(0,0,0, 14,00,00), new Date(0,0,0, 17,00,00)],
                            [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
                            [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
                            [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
                            [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)]
        ]
        }]

    });
4

1 に答える 1

1

まず、Date.UTCただの代わりに使用Dateします -- 数値を返します (これは、列範囲で使用できるものだと思います)。次に、それを正しく表示するために、現在のデータであるミリ秒から日付オブジェクトを作成するようにフォーマッタを変更します。

formatter: function () {
    var d = new Date(this.y);
    return return d.getHours() + ':' + (d.getMinutes());
}

ここで jsFiddle を確認してください。

于 2013-08-24T13:48:22.583 に答える