以时间格式hh:mm制作高图表的y轴

Making y axis of highcharts in time format hh:mm

本文关键字：高图表 mm 时间 格式 hh      更新时间：2023-09-26

我需要输入 y 轴时间格式 hh：mm，例如 y 轴应该有 16：00、32：00 等刻度或 smth simmilar。
我一直在使用高图表 - 我是JS和网络编程的新手。
我以毫秒为单位的数据并将其转换为 hh：mm 格式，但是当我的毫秒数超过 86400000（24 小时）时，它会显示下一个日期，我需要它仍然以小时：分钟格式显示。
有什么办法吗？我试图将 y 轴从 type: 'datetime' 更改为 type: 'time' ，但这对我没有多大帮助。这是我的图表的jsfiddle示例，您可以在下面找到js代码。

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                title: {
                    text: 'Time (hh:mm)'
                },
                type: 'datetime',
                dateTimeLabelFormats: {
                hour: '%H:%M'
            }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
            }]
        });
    });
所以如果

有人需要它，这是我得到的答案（这是jsfiddle的链接）。
我以毫秒为单位设置时间变量：

data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

然后我根据需要格式化此值：

yAxis: {
            title: {
                text: 'Time (hh:mm)'
            },
            labels: {
                formatter: function () {
                    var time = this.value;
                    var hours1=parseInt(time/3600000);
                    var mins1=parseInt((parseInt(time%3600000))/60000);
                    return hours1 + ':' + mins1;
                }
            }
        }

这是我发现以纯hh：mm格式制作y轴的唯一方法。您也可以使数据不是以毫秒为单位，而是以您想要或需要的 w/e 为单位。

那么最好使用您自己的格式化方法，在这里您将对格式进行更多控制。 您可以使用格式化程序，如下所示。

yAxis: {
    labels: {
        formatter: function () {
            //get the timestamp
            var time = this.value;
            //now manipulate the timestamp as you wan using data functions
        }
    }
}

希望这将帮助您实现所需的目标。

相关文章：