使用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在图表上绘制小时和日期

回答

相关问题