Highcharts：在xaxis上设置固定时间间隔 [英] Highcharts: set regular intervals on xaxis

问题描述

随着时间的推移，我有一系列数据值（由一个计数确定）。数据以 n 分钟间隔（计数x间隔）提供;通常数据将为96 x 15（96 15分钟的时间间隔为24小时）。间隔的长度和数量都是动态的。数据系列可以是多种类型的数据;它可以是多种格式，如0.000123或1.23或198763.0000089675。

我希望我的xaxis以1小时的间隔显示时间（屏幕房产很小，所以2小时间隔可能是需要的）。我有这个：

  xAxis：{
类型：'datetime'，
 title：{
 text：'Time（'+ period +'）'
}，
 dateTimeLabelFormats：{
分钟：'％H：％M'，
小时：'％H： ％M'
} 
} 
  

以及这样一个系列： p>

  [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,16 999.999999999993,15999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996,14999.999999999996,15999.999999999996,15999.999999999996,14999.999999999996] 
  

但是xaxis上的值为：

  00：00：00.020 00：00：00.040 00：00：00.020 00:00： 00.020 
  

我已经浏览了highcharts API，但我无法理解它如何处理时间序列。

如何告诉highcharts正确显示时间？

解决方案 div>

如果轴是datetime类型，那么图表将使它看起来合适。如果您不喜欢渲染方式，则可以使用 dateTimeLabelFormats控制图表的日期时间格式像你已经在做的一样。

基于图表选择以下默认格式之一时的数据日期时间跨度：

  second：'％H：％M：％S'，
分钟：'％H：％M'，
小时：'％H：％M '，
 day：'％e。 ％b'，
星期：'％e。 ％b'，
 month：'％b \'％y'，
 year：'％Y'
  

如果你想强迫他们全部到小时和分钟，无论范围是什么，然后设置它们如下：

 第二：'％H：％M'，
分钟：'％H：％M'，
小时：'％H：％M'，
天：'％H：％M'，
星期：'％H：％M'，
月份：'％H：％M'，
年：'％H：％M' 
  

要控制显示日期的时间间隔，请使用 tickInterval 。由于您的轴的类型为
datetime，因此您必须使用毫秒作为tickInterval的单位。所以，一个1小时的tickinterval以毫秒为单位是3600000.如果你想要它是2个小时然后使用7200000。

I have a series of data values over time (determined by a count). Data is provided at n minute 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.

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: {
    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:

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.

How can I tell highcharts to display the time correctly?

解决方案

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 dateTimeLabelFormats like you are already doing.

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.

这篇关于Highcharts：在xaxis上设置固定时间间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！