在 Highcharts 上显示和使用时间值答案

【问题标题】：Display and use time values on Highcharts在 Highcharts 上显示和使用时间值
【发布时间】：2018-04-12 09:16:46
【问题描述】：

我对 Highcharts 还很陌生，文档对于我来说非常庞大，可以解决我的小问题。

我正在为跑步者开发应用程序，并希望以分钟为单位在图表上显示跑步速度：以公里或英里为单位的秒数，格式为 05:30，这意味着速度为公里或英里前 5 分 30 秒。

我当前（但不工作）的代码在这里：

Highcharts.chart('container', {
yAxis: {
    type: 'datetime',
  categories:  ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
      labels: { format: '{value:%H:%M}'}
},

xAxis: {
    categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
    data: ['05:00', '06:00' , '06:30'],
    dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});

目前图表中的线条没有出现。任何人都可以修复我的代码以正常工作吗？谢谢。

【问题讨论】：

标签： time highcharts yaxis

【解决方案1】：

数据必须是数字，而不是字符串值。如果您在控制台中查看，您很可能会看到 Error 14 告诉您这一点。

将您的数据更改为毫秒（highcharts 理解时间所需的格式）将起作用，如下所示：

data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],

工作示例： https://jsfiddle.net/ewolden/55bk99ke/2/

如果您想修复上例中的工具提示，您只需像格式化 yAxis 标签一样对其进行格式化。像这样：

tooltip: {
  pointFormat: '{point.y:%H:%M}'
},

https://jsfiddle.net/ewolden/55bk99ke/5/

【讨论】：

太好了，这行得通。还有一件事 - 如何显示（悬停时）“可读”值，如 5:00、6:00 或 6:30？
@mesnicka 添加了第二个示例来向您展示如何做到这一点。