highcharts - 使用 HighCharts 在时间序列 LineChart 中显示开始和结束日期范围

Question

我有一个简单的折线图，我试图在其中显示具有开始和结束的时间序列数据。像这样

{"beginTimeSeconds": 1626145840, "endTimeSeconds": 1626232240, "totalTimeInSeconds": 0, "uri": "/logout"}

但是，根据 HighChart 配置时间序列只接受一个这样的时间戳。

Highcharts.chart('container', {
    chart: {
        zoomType: 'x'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'test'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'line',
        name: 'Test',
        data: [
            [1167609600000, 0.7537], // Only one timestamp
            [1167696040000, 0.7537] // Only one timestamp
        ]
    }]
});

有没有办法传递范围，以便工具提示显示开始日期 - 结束日期后跟值。

标签： highcharts

Answer 1

因此，在 Highcharts 中默认情况下，您的点包含您可以指定的 4 个主要属性。它的 x 和 y 值、名称和颜色。API 参考：https ://api.highcharts.com/highcharts/series.line.data

如果您希望您的观点有更多属性，您可以添加它们，例如在工具提示中使用其中一个。类似的东西：https ://jsfiddle.net/BlackLabel/k49z8mv0/

Highcharts.chart('container', {
 chart: {
  zoomType: 'x'
 },
 xAxis: {
  type: 'datetime'
 },
 yAxis: {
  title: {
   text: 'test'
  }
 },
 legend: {
  enabled: false
 },
 tooltip: {
  formatter: function() {
   return 'Point value is: ' + this.y + '<br/>The total time in Second 
    equals: ' + this.point.totalTimeInSeconds + '<br/>' + 
    Highcharts.dateFormat('%Y-%m-%d', this.point.beginTimeSeconds) + ' - 
    ' + Highcharts.dateFormat('%Y-%m-%d', this.point.endTimeSeconds);
  }
},
series: [{
type: 'line',
name: 'Test',
data: [{
    x: 1167609600000,
    y: 0.7537,
    beginTimeSeconds: 1626145840,
    endTimeSeconds: 1626232240,
    totalTimeInSeconds: 0
  },
  {
    x: 1167696040000,
    y: 0.7537,
    beginTimeSeconds: 1626145840,
    endTimeSeconds: 1626232240,
    totalTimeInSeconds: 1
  }
]
}]
});

如果这不能回答您的问题，请准确说明问题所在。