以时间格式hh:mm制作高图的y轴 [英] Making y axis of highcharts in time format hh:mm

问题描述

我需要输入y轴时间格式hh:mm ，例如y轴应具有16:00、32:00等刻度或类似符号.
我一直在研究highcharts-我是JS和网络编程的新手.
我的数据以毫秒为单位，然后将其转换为hh:mm格式，但是当我的毫秒数超过 86400000(24小时)时，它将显示我的下一个日期，并且我仍需要以小时为单位进行显示:分钟格式.
有什么办法吗?我试图将y轴从type: 'datetime'更改为type: 'time'，但这并没有很大帮助. 这是我的图表的 jsfiddle 示例，下面您只能找到js代码.

I need to put in y-axis time format hh:mm, for example y-axis should have 16:00,32:00 and etc. ticks or smth simmilar.
I've been working with highcharts - I'm new with JS and web-programming.
I have my data in miliseconds and convert it to hh:mm format, but when I have miliseconds more than 86400000 (24 hours) it shows me next date and I need it to be still displayed in hours:minutes format.
Is there any way to do it? I've tried to change y-axis from type: 'datetime' to type: 'time', but it didn't help me alot. Here is jsfiddle example of my charts and bellow you can find just js-code.

$(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]

            }]
        });
    });

推荐答案

因此，这是如果有人需要的答案(这是

So here is the answer that I've got if anyone need it (here is the link to jsfiddle).
I set the time variables in ms:

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

然后我根据需要设置此值的格式:

And then I format this value as I need:

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轴的唯一方法.另外，您可以使数据不是以ms为单位，而是以您想要或需要的w/e为单位.

That's the only way I found to make y axis in pure hh:mm format. Also you can make the data not in ms, but in w/e you want or need.

这篇关于以时间格式hh:mm制作高图的y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！