javascript Highcharts:在 xaxis 上设置固定间隔
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11470433/
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
Highcharts: set regular intervals on xaxis
提问by Squishy
I have a series of data values over time (determined by a count). Data is provided at nminute intervals (count x interval); typically the data will be 96 x 15 (96 15minute intervals to give 24 hours). The length of the intervals and the count are both dynamic. The data series can be numerous types of data; it could be in numerous formats like 0.000123 or 1.23 or 198763.0000089675.
随着时间的推移,我有一系列数据值(由计数确定)。数据以n分钟间隔(计数 x 间隔)提供;通常数据将是 96 x 15(96 个 15 分钟间隔以提供 24 小时)。间隔的长度和计数都是动态的。数据系列可以是多种类型的数据;它可以是多种格式,例如 0.000123 或 1.23 或 198763.0000089675。
I would like my xaxis to show time in 1 hour intervals (screen real estate is small, so 2 hour intervals might be whats needed). I have this:
我希望我的 xaxis 以 1 小时为间隔显示时间(屏幕空间很小,因此可能需要 2 小时的间隔)。我有这个:
xAxis: {
type : 'datetime',
title: {
text: 'Time ('+period+')'
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M'
}
}
and a series like this:
和这样的系列:
[15999.999999999996,14999.999999999996,15999.999999999996,14999.999999999996,13999.999999999996,15999.999999999996,17999.999999999993,17999.999999999993,16999.999999999993,15999.999999999996,16999.999999999993,14999.999999999996,14999.999999999996,13999.999999999996,14999.999999999996,14999.999999999996,14999.999999999996,14999.999999999996,15999.999999999996,19999.999999999993,23999.999999999993,27999.999999999993,24999.999999999993,22999.999999999993,21999.999999999993,23999.999999999993,29999.999999999993,26999.999999999993,29999.999999999993,31999.999999999993,34999.999999999985,31999.999999999993,31999.999999999993,33999.999999999985,34999.999999999985,32999.999999999985,32999.99999999998,32999.99999999997,32999.99999999997,32999.99999999997,32999.999999999985,32999.999999999985,34999.999999999985,32999.999999999985,32999.999999999985,32999.999999999985,35999.999999999985,32999.999999999985,35999.999999999985,32999.999999999985,33999.999999999985,30999.999999999993,28999.999999999993,31999.999999999993,32999.999999999985,33999.999999999985,30999.999999999993,32999.999999999985,32999.999999999985,30999.999999999993,30999.999999999993,31999.999999999993,31999.999999999993,29999.999999999993,29999.999999999993,30999.999999999993,30999.999999999993,26999.999999999993,25999.999999999993,27999.999999999993,29999.999999999993,27999.999999999993,26999.999999999993,25999.999999999993,26999.999999999993,27999.999999999993,25999.999999999993,28999.999999999993,29999.999999999993,26999.999999999993,24999.999999999993,18999.999999999993,17999.999999999993,16999.999999999993,16999.999999999993,15999.999999999996,16999.999999999993,15999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996]
but the values on the xaxis are:
但 xaxis 上的值是:
00:00:00.020 00:00:00.040 00:00:00.020 00:00:00.020
I've poked through the highcharts API but I can't make head nor tails of how it deals with timeseries.
我已经浏览了 highcharts API,但我无法理解它是如何处理时间序列的。
How can I tell highcharts to display the time correctly?
如何告诉 highcharts 正确显示时间?
回答by Linger
If the axis is of type datetime then the chart will render them the best way it sees fit. If you don't like the way they are rendered, you can control the datetime formats of the chart using dateTimeLabelFormatslike you are already doing.
如果轴是 datetime 类型,则图表将以其认为合适的最佳方式呈现它们。如果您不喜欢它们的呈现方式,您可以使用dateTimeLabelFormats控制图表的日期时间格式,就像您已经在做的那样。
Based on the datetime span of the data at the time the chart will pick one of the following default formats:
根据当时数据的日期时间跨度,图表将选择以下默认格式之一:
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
If you want to force them all to the Hour and Minute no matter what the range is then set them as follows:
如果您想将它们全部强制为小时和分钟,无论范围是多少,请按如下方式设置它们:
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'
To control the interval of the dates shown use tickInterval. Since your axis is of type datetime you will have to use milliseconds as the unit for your tickInterval. So, a 1 hour tickinterval in milliseconds is 3600000. If you want it to be 2 hours then use 7200000.
要控制显示的日期间隔,请使用tickInterval。由于您的轴是日期时间类型,因此您必须使用毫秒作为刻度间隔的单位。因此,以毫秒为单位的 1 小时刻度间隔是 3600000。如果您希望它是 2 小时,则使用 7200000。
回答by wergeld
Rough guess here is that you do not include a time in your series. If your xAxis is datetime you need to somehow provide that to HighCharts. For example you series should look like:
粗略的猜测是,您的系列中没有包含时间。如果您的 xAxis 是日期时间,您需要以某种方式将其提供给 HighCharts。例如,您的系列应如下所示:
[[timeInJSTime1, 15999.999999999996],
[timeInJSTime2, 14999.999999999996],
....
]