web-dev-qa-db-ja.com

Highchartsを使用してX軸に時間と分を表示する

次のデータ（時間、バッテリーレベル）を面グラフで出力したい：

data: [
    [08.15, 14.8],
    [08.20, 13.9],
    [08.25, 12.8],
    [08.30, 11.8],
    [08.35, 13.9],
    [08.40, 14.1],
    [08.45, 13.9],
    [08.50, 14],
    [08.55, 14],
    [09.00, 14.1],
    [09.05, 14.4]
]

x軸は、午前00:00 AM 00.00 PMから始まります。

残念ながら、APIを確認するときに、使用するオプションがわかりません。私が今得ているのは、8.00〜8.55,8.60,8.65〜9.00のx軸です。したがって、分単位のシステムではなく、10進数のシステムを使用します。

回線が24時間60分で構成されるように設定するにはどうすればよいですか？

現在のデータを使用すると、グラフは空のようになり、ポイントは午前8時から午前9時くらいしかありません。

誰かが私の道を助けてくれることを願っています。

おかげで、

Mattijs

highcharts
15
Mattijs

このコードを試して、X軸を12時間形式で作成できます

xAxis: {
    title: {
        enabled: true,
        text: 'Hours of the Day'
    },
    type: 'datetime',

    dateTimeLabelFormats : {
        hour: '%I %p',
        minute: '%I:%M %p'
    }
},

また、「ツールチップ」については、これを試してください：

tooltip: {
    formatter: function() {
        return ''+
                "" +
                'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
    }
},

そしてもちろんシリーズは：

series: [{
        data: [
            [Date.UTC(2013, 3, 22, 1, 15), 12.7], 
            [Date.UTC(2012, 3, 24, 3, 20), 13.5], 
            [Date.UTC(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

それがあなたの問題を解決することを願っています。ありがとう。

32
rony36

Highchartsには、時間または日付をX軸としてプロットする組み込みの方法があります。通常、この場合、データはミリ秒単位の時間値を使用し、ハイチャートはそれに応じてそれをプロットします（ この例を参照 ）。

データを含めて1日24時間使用したい場合は、次のようになります。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime' //ensures that xAxis is treated as datetime values
    },

    series: [{
        data: [
            [Date.UTC(2012, 5, 22, 8, 15), 14.8], 
            [Date.UTC(2012, 5, 22, 8, 20), 13.9], 
            [Date.UTC(2012, 5, 22, 8, 25), 12.8]
            //and so on...
        ]
    }]
});

次に、カスタム xAxisフォーマッタ または dateフォーマッタ を使用して、希望どおりにラベルを表示するなどの操作を実行できます。

8
NT3RP