高图表以小时格式设置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

您应该

• 使用对，X/Y等：[123002020000,9]，其中123002020000是在毫秒时间（JS时间戳等类型轴线（http://api.highcharts.com/highcharts#xAxis.type）为“日期时间”的，则在以下两种方式之一设置数据），这也可以由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 
     } 
    },