charts - 高チャート セット x 軸の値 (時間形式)

Question

グラフのプロットにハイチャートを使用しています。このような時間形式の x 軸が必要です [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19, 20,21,22,23]
また、コメントしたカテゴリ パラメータを使用したくありません

以下はJSです

$('#container').highcharts({
                chart: {
                    zoomType: 'xy'
                },

                title: {
                    text: 'Average Monthly Temperature and Rainfall in Tokyo'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: [{
                    //categories: ['00', '01', '02', '03', '04', '05',
                        //'06', '07', '08', '09', '10', '11']
                        labels: {
                            formatter: function() {
                            return Highcharts.dateFormat('%H', this.value);

                        },
                        style: {
                            color: '#89A54E'
                        },

                        }

                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        //format: '{value}°C',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    min:0,
                    //max:4,
                    tickInterval:2,

                    title: {
                        text: 'Temperature',
                        style: {
                            color: '#89A54E'
                        }
                    }
                }, { // Secondary yAxis
                    title: {
                        text: 'Rainfall',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    max:240,
                    tickInterval:50,
                    labels: {
                        //format: '{value} mm',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    x: 120,
                    verticalAlign: 'top',
                    y: 100,
                    floating: true,
                    backgroundColor: '#FFFFFF'
                },
                series: [{
                    name: 'spent',
                    color: '#4572A7',
                    type: 'column',
                    yAxis: 1,
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                    tooltip: {
                        valueSuffix: ''
                    },



                }, {

                    name: 'click',
                    color: '#89A54E',
                    type: 'spline',
                    yAxis: 1,
                    data: msg,
                    tooltip: {
                        valueSuffix: ''
                    }
                },{

                    name: 'click',
                    color: '#89A54E',
                    type: 'spline',

                    data: [9.9, 1.5, 6.4, 9.2, 4.0, 6.0, 5.6, 8.5, 6.4, 4.1, 5.6, 4.4],
                    tooltip: {
                        valueSuffix: ''
                    }
                }

                ]
            });

    }
});

X 軸コード:

xAxis: [{
                //categories: ['00', '01', '02', '03', '04', '05',
                    //'06', '07', '08', '09', '10', '11']
                    labels: {
                        formatter: function() {
                        return Highcharts.dateFormat('%H', this.value);

                    },
                    style: {
                        color: '#89A54E'
                    },

                    }

            }],

前もって感謝します

Answer 1

軸のタイプ ( http://api.highcharts.com/highcharts#xAxis.type ) を「datetime」として設定し、次の 2 つの方法のいずれかでデータを設定する必要があります。

• x/y のようなペアを使用します: [123002020000,9] 、ここで 123002020000 はミリ秒単位の時間 (JS タイムスタンプ) で、Date.UTC() でも達成できます。
• pointStart / pointInterval / tickInterval を使用http://jsfiddle.net/jbVV6/

http://api.highcharts.com/highcharts#xAxis.type http://api.highcharts.com/highcharts#plotOptions.series.pointInterval http://api.highcharts.com/highcharts#xAxis.tickInterval

 plotOptions:{
        series:{
            pointStart:Date.UTC(2012,0,1),
            pointInterval: 3600 * 1000
        }
    },