Highcharts:y轴持续时间(小时)每24小时重置一次

tvmytwxo  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(176)

图像本身会说话,我想在y轴上以小时为单位显示持续时间。但每次值达到24h时,y轴都会重置为0。图像中蓝条的实际值为28:19:15,但由于已重置,因此仅显示4小时(y轴的第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"
    }
]
}
zed5wv10

zed5wv101#

实际上,您希望获得总时间而不是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/

相关问题