使用 Highcharts 在图表上绘制时间和日期

Question

谁能给我指出一个使用 highcharts 创建图表的示例，xAxis 包含一天中的几个小时 00:00 到 23:59，而 yAxis 包含我可以的日期列表'找不到如何从文档中实现的示例。

基本上驱动图表的数据应该是这样的

15/05/2017：09: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

任何例子或指导都很好。

谢谢

Answer 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]]
        }]
});
});

Answer 2

要获得与您的要求类似的图表，您可以将 datetime xAxis 与散点图系列一起使用。 http://api.highcharts.com/highcharts/xAxis.type

您可以使用 dateTimeLabelFormats 参数将日期时间标签格式更改为 HH:MM:SS： 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/

使用 Highcharts 在图表上绘制时间和日期

Plotting hours and Dates on chart using Highcharts

highcharts

highcharts-ng