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

时间:2013-11-07 12:46:50

标签: javascript date datetime highcharts

我需要放入y轴时间格式hh:mm ,例如y轴应该有16:00,32:00等等,滴答或smth simmilar。 我一直在使用高级图表 - 我是JS和网络编程的新手 我有几毫秒的数据并将其转换为hh:mm格式,但当我有超过 86400000(24小时)的毫秒时,它会显示下一个日期,我需要它仍然以小时显示:分钟格式。
有什么办法吗?我试图将y轴从type: 'datetime'更改为type: 'time',但它对我没有帮助。 这是jsfiddle我的图表示例,下面你可以找到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]

            }]
        });
    });

2 个答案:

答案 0 :(得分:3)

所以,如果有人需要,我会得到答案(这里是link到jsfiddle)。
我用ms设置时间变量:

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轴的唯一方法。此外,您可以使数据不是以ms为单位,而是以您想要或需要的数据为单位。

答案 1 :(得分:1)

然后更好地使用您自己的格式化方法,在这里您可以更好地控制格式。你可以使用如下所示的格式化程序。

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

希望这能帮助您实现所需。

相关问题