Highcharts:如何在 HH:MM:SS 格式的 x 轴上表示一天中的时间?

Question

我有一个这种形式的表格

Time        FR    IT     DE
00:00:09    1     2      12
00:00:18    1     0      0
00:00:28    1     3      11

我正在尝试使用高图表绘制这些数据。这是我的配置

data = {
"title": {
"text": "Concurrency"
},
"yAxis": {
"title": {
"text": "Number of Employees"
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "middle"
},
"series": [
{
"name": "FR",
"data": data_fr
},
{
"name": "IT",
"data": data_it
},
{
"name": "DE",
"data": data_de
}
],
}

时间字段表示一天中的时间(以HH:MM:SS为单位(。其余列是我需要在 Y 轴上绘制为折线图的系列数据。现在，此表中的行数在 5000 左右非常大。我想在 x 轴上绘制时间，但我不想显示每个条目。我只想在 x 轴上显示小时数。例如，凌晨 1 点、凌晨 2 点、凌晨 3 点等，即使Time列包含如此多的时间条目。我怎样才能做到这一点？

另外，有什么方法可以平滑我的线图吗？因为有这么多值，图形有很多锋利的边缘。

Answer 1

我不得不将时间从字符串更改为时间戳(从纪元开始的毫秒(字段。完成此操作后，我能够提供配置选项：

"xAxis": {
"type": "datetime"
}

通过此配置，Highcharts会自动处理x轴上的混乱。它以固定的间隔在x轴上显示标签，例如相隔2小时。

然后我的另一个疑问是如何提供具有x和y轴值的系列数据。早些时候，我只提供这样的 y 轴值：

"series": [
{
"name": "CC_FR",
"data": [10, 23, 11]
},

我不得不将data数组从数字数组更改为对象数组，每个对象都有x和y键和值。喜欢这个：

"series": [
{
"name": "CC_FR",
"data": [
{ "x": 1528210784424 ,"y": 10 },
{ "x": 1528210803102 ,"y": 23 },
{ "x": 1528210810702 ,"y": 11 }
],
"turboThreshold": 0
},

在我的情况下需要"turboThreshold": 0，因为data数组的长度超过 1000。我还添加了配置选项：

"chart": {
"zoomType": 'x'
},

这使我的图表可以缩放，每当我放大时，x 轴上的标签都会动态呈现，而无需我为混乱而烦恼。