javascript 使用 Highcharts 在 yAxis 上绘制秒、分和小时

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8268170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:51:18  来源:igfitidea点击:

Plotting seconds, minutes and hours on the yAxis with Highcharts

javascriptjqueryhighcharts

提问by LCL

I have some data that looks like this:

我有一些看起来像这样的数据:

min="00:09" med="03:11" mean="23:39" max="12:40:26"

min="00:09" med="03:11" mean="23:39" max="12:40:26"

I'd like to be able to be able to use these values as datapoints but I'm not sure how to plot them as they are not simple integers. Ideally I'd like to have the labels on the Y axis show something like 'hours' or if I was to use multiple y axes then it could show 'seconds' for the 'min' values, 'minutes' for the 'mean' values and so on adapting to the appropriate time window.

我希望能够将这些值用作数据点,但我不确定如何绘制它们,因为它们不是简单的整数。理想情况下,我希望 Y 轴上的标签显示类似“小时”的内容,或者如果我要使用多个 y 轴,那么它可以显示“分钟”值的“秒”,“平均值”的“分钟”值等适应适当的时间窗口。

I'm not sure if I can use datetime objects as I only have a time value and not a date.

我不确定是否可以使用 datetime 对象,因为我只有时间值而不是日期。

Any ideas will be appreciated and thanks in advance.

任何想法将不胜感激,并提前致谢。

回答by NT3RP

If the times that you have are static strings, you can convert them into a datetime object...

如果您拥有的时间是静态字符串,则可以将它们转换为日期时间对象...

//convert 'string' times into a timestamp (milliseconds)
//so long as your string times are consistently formatted
//e.g. "0:03:00" not "3:00"
var t = Date.parse("1-1-1 " + yourTime)

...But if you can turn them into a millisecond value at all, you should be fine.

...但如果你能把它们变成毫秒值,你应该没问题。

Then use normal time format for the y-axis, and format it as you like using the date label format...

然后使用 y 轴的正常时间格式,并使用日期标签格式根据需要对其进行格式化...

var chart = new HighChart({
    //...
    yAxis: {
        type: 'datetime', //y-axis will be in milliseconds
        dateTimeLabelFormats: { //force all formats to be hour:minute:second
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        }
    }
});