使用Highcharts在圖表上繪製小時和日期

任何人都可以指出我使用高圖創建情節圖的示例：xAxis包含當天00:00至23:59的小時，yAxis包含日期列表i找不到如何從文檔中實現的示例。使用Highcharts在圖表上繪製小時和日期

基本上驅動圖表會是這樣的

15/05/2017的數據：09：00：00,13：00，14:30，17:00，19:15

16/05/2017：09:30，11:20，12:45，15:10，18:00

17/05/2017：08:30，10:15，13:00，14:05， 20:30

任何示例或方向都很棒。

感謝

來源

2016-09-29 Tron Diggy

也許這個例子將幫助你：http://jsfiddle.net/0quce36h/我已經使用datetime類型的xAxis熱圖 –

對不起，該示例不運行，所以我不能看到輸出？ –

你對我的鏈接有什麼問題？您是以http還是https加載它？ –

實現類似於您的要求，您可以使用日期時間X軸與散射序列圖。 http://api.highcharts.com/highcharts/xAxis.type

您可以將日期時間標籤格式更改爲HH：MM：SS使用dateTimeLabelFormats參數： http://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

xAxis: { 
    type: 'datetime', 
    dateTimeLabelFormats: { 
    millisecond: '%H:%M:%S', 
    second: '%H:%M:%S', 
    minute: '%H:%M:%S', 
    hour: '%H:%M:%S', 
    day: '%H:%M:%S', 
    week: '%H:%M:%S', 
    month: '%H:%M:%S', 
    year: '%H:%M:%S' 
    } 
},

在這裏你可以看到一個例子是如何工作的：http://jsfiddle.net/0quce36h/5/

來源

2016-10-04 09:59:22

在這個例子中，用於（鍵：['x'，'y'，'val']的val數據是什麼，）我無法看到它在圖表上引用的任何地方？但感謝這正是我所期待的。 –

val只是爲了防萬一，因爲它參考了我建議你的舊heatmap圖表。你可以在你的tooltip.formatter中使用這個val，但是你也可以刪除它，只保留x和y值 –

-1

$(function() { 
    var d = new Date("July 21, 1983 01:15:00"); 
    var n1 = d.getUTCMinutes(); 
    d = new Date("July 21, 1983 01:16:30"); 
    n2 = d.getUTCMinutes(); 
    d = new Date("July 21, 1983 01:19:33"); 
    n3 = d.getUTCMinutes(); 

    chart = new Highcharts.Chart({ 
     chart: { 
      type: 'line', 
      renderTo: 'container' 
     }, 
     title: { 
      text: 'Time' 
     }, 
     xAxis: { 
      crosshair: true, 
      categories: ['15/05/2017', '16/05/2017', '17/05/2017'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Military Time Hours' 
      } 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: 
      [[n1], 
      [n2], 
      [n3]] 
     }] 
}); 
});

來源

2016-09-29 15:02:16 Versatile

對不起，我不認爲這是正確的x和y軸數據是錯誤的方式。圖表也需要默認爲00:00至23:59。 –

使用Highcharts在圖表上繪製小時和日期

回答

相關問題