Question

我有一张表格

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

我正在尝试使用highcharts绘制此数据。这是我的配置

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轴上的小时数。例如，即使Time列包含如此多的时间条目，凌晨1点，凌晨2点，凌晨3点等。我怎么能做到这一点？

另外，有什么办法可以让我的线条变得平滑吗？因为有这么多的值，图形有很多尖锐的边缘。

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轴上的标签都是动态渲染的，没有任何需要从我的结束打扰杂乱。

Highcharts：如何用HH：MM：SS格式表示x轴上的时间？

1 个答案: