Highcharts：以小时为单位的 yAxis 持续时间每 24 小时重置一次

Question

图片不言自明，我想在 y 轴上显示小时的持续时间。但是每次值达到 24h 时，yAxis 都会重置为 0。图像中蓝色条的实际值为 28:19:15 但它只显示 4 小时，因为它已被重置（yAxis 的第 4 个值显示 0）

我当前的配置：

{
"chart": {
    "type": "column"
},
"plotOptions": {
    "column": {
        "dataLabels": {
            "enabled": true
        }
    }
},
"series": [
    {
        "data": [
            101955467,
            0,
            0
        ],
        "dataLabels": {
            "enabled": true,
            "format": "{y:%H:%M:%S}"
        },
        "name": "duration",
        "stack": null,
        "yAxis": "1"
    }
],
"xAxis": [
    {
        "categories": [
            "cat 1",
            "cat 2",
            "cat 3"
        ]
    }
],
"yAxis": [
    {
        "allow_decimals": false,
        "dateTimeLabelFormats": {
            "day": "%H:%M",
            "hour": "%H:%M",
            "minute": "%H:%M",
            "month": "%H:%M",
            "second": "%H:%M",
            "week": "%H:%M",
            "year": "%H:%M"
        },
        "id": "1",
        "labels": {
            "format": "{value:%H:%M:%S}"
        },
        "max": 101955467,
        "min": 0,
        "opposite": false,
        "title": {
            "text": "duration"
        },
        "type": "datetime"
    }
]
}

Answer 1

其实你想得到一个总时间而不是DateTime。在这种情况下，您需要创建自己的标签格式化程序，将毫秒转换为小时、分钟和秒数。

示例代码：

  dataLabels: {
        enabled: true,
        formatter: function() {
          let s, m, h;
          s = this.y / 1000;
          h = parseInt(s / 3600);
          s = s % 3600;
          m = parseInt(s / 60);
          s = (s % 60).toFixed(0);
          let number = (h + ":" + m + ":" + s);

          return number;
        }
      }

API参考： https://api.highcharts.com/highcharts/series.column.dataLabels.formatter

演示： https://jsfiddle.net/BlackLabel/Lcjewr2o/

Highcharts：以小时为单位的 yAxis 持续时间每 24 小时重置一次

Highcharts: yAxis duration in hours resets every 24h

highcharts