在 Highcharts 上显示和使用时间值

Question

我是 Highcharts 的新手，文档非常丰富，可以解决我的小大问题。

我正在为跑步者开发应用程序，并希望在图表上以 minutes:seconds 为单位按公里或英里显示运行配速，格式如 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'}}}]}
});

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

Answer 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/

在 Highcharts 上显示和使用时间值

Display and use time values on Highcharts

time

highcharts

yaxis