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”，然后以两种方式之一设置数据：

使用对，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
        }
    },

高图表以小时格式设置x轴值

1 个答案: