0

我正在使用高图表进行图形绘制。我想要像这样的小时格式的 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'
                    },

                    }

            }],

提前致谢

4

1 回答 1

6

您应该将轴的类型（http://api.highcharts.com/highcharts#xAxis.type）设置为“日期时间”，然后以两种方式之一设置数据：

  • 使用对，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
        }
    },
于 2013-05-29T08:28:16.813 回答