Highchart列時間範圍

我正在嘗試創建圖表以顯示每天的小時範圍。換句話說，我想這樣做： http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/，但與小時信息，而不是溫度。我已經制作了這個代碼（https://paste.maxux.net/x61fKlc），但系統並沒有繪製條形圖。Highchart列時間範圍

有人可以解釋如何做到這一點？謝謝你的時間。

$('#container').highcharts({ 

     chart: { 
      type: 'columnrange', 
      inverted: true 
     }, 
     xAxis: { 
      categories: ['01/01/2000', '02/01/2000', '03/01/2000', '04/01/2000', '05/01/2000', '06/01/2000', '07/01/2000'] 
     }, 
     yAxis: { 
     type: 'datetime', 
      title: { 
       text: 'Heure' 
      } 
     }, 
     plotOptions: { 
      columnrange: { 
        dataLabels: { 
          enabled: true, 
          formatter: function() { 
        return (this.y.getHours()+1) + ':' + (this.y.getMinutes()); 
          } 
        } 
      } 
     }, 

     legend: { 
      enabled: false 
     }, 

     series: [{ 
      name: 'Working hours', 
      data: [ 
          [Date(0,0,0, 12,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 16,00,00)], 
          [Date(0,0,0, 14,00,00), new Date(0,0,0, 17,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)] 
     ] 
     }] 

    });

來源

2013-08-24 Loic Coenen

首先，使用的Date.UTC而不只是Date - 它會返回一個數字（我相信是你可以在一列範圍內使用的）;第二，正確地顯示的是，改變格式化器從它們是現在該數據的毫秒創建日期對象：

formatter: function() { 
    var d = new Date(this.y); 
    return return d.getHours() + ':' + (d.getMinutes()); 
}

檢查的jsfiddle here。

來源

2013-08-24 13:48:22 ssarabando

Highchart列時間範圍

回答

相關問題