javascript x 轴中 dateTime 的 Highcharts 最大间隔?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10748151/
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 10:54:49  来源:igfitidea点击:

Highcharts max interval for dateTime in x-axis?

javascripthighcharts

提问by You Qi

I have a daily graph, spanning across 00:00 to 23:59. but for live data, let's say currently is 9AM, by default it will stretch the graph from 00:00 - 09:00, which doesn't look nice to me. What I want is the x-axis max at 23:59 of the same day, so it will show 09:00 - 23:59 as blank. I tried $graph["xAxis"]["max"] = (time()+86400)*1000but without avail. any suggestion? thanks!

我有一张每日图表,时间跨度为 00:00 到 23:59。但是对于实时数据,假设当前是上午 9 点,默认情况下它将从 00:00 - 09:00 拉伸图形,这对我来说不太好。我想要的是同一天 23:59 的 x 轴最大值,因此它将显示 09:00 - 23:59 为空白。我试过了,$graph["xAxis"]["max"] = (time()+86400)*1000但没有用。有什么建议吗?谢谢!

回答by jaapz

(Although this is an old question, I came here using google search and it is still very much at the top of search results when searching for max time for x axis in highcharts, so I think this comment is still useful.)

(虽然这是一个老问题,但我是使用谷歌搜索来到这里的,在 highcharts 中搜索 x 轴的最大时间时,它仍然位于搜索结果的顶部,所以我认为这个评论仍然有用。)

The accepted answer may be true for older versions of highcharts, but in the current version (v3.0.7) you can also set the xAxis.max attribute to the datetime you want the graph to end on. This would look like this, and is IMO a way cleaner solution:

对于旧版本的 highcharts,接受的答案可能是正确的,但在当前版本 (v3.0.7) 中,您还可以将 xAxis.max 属性设置为您希望图形结束的日期时间。这看起来像这样,并且 IMO 是一种更清洁的解决方案:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            type: 'datetime',
            max: Date.UTC(2010, 0, 2),
            dateTimeLabelFormats: {
                day: '%e of %b'   
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 1 * 3600 * 1000 // one hour
        }]
    });
});

See this jsfiddle example.

请参阅此 jsfiddle 示例

回答by Linger

Highcharts will only show the last data point that is specified. If you want to force it to show the 0900 - 23:59 you will have to pass it all the data points for the those times you want displayed, but for the value pass null. Here is an example: jsfiddle example.

Highcharts 将仅显示指定的最后一个数据点。如果要强制它显示 0900 - 23:59,则必须将要显示的那些时间的所有数据点传递给它,但值传递 null。这是一个示例:jsfiddle 示例

Once the data points go over the hour range it will automatically format the datatime labels differently. You may want to control the formatting of the data labels via dateTimeLabelFormats.

一旦数据点超过小时范围,它将自动以不同的方式格式化数据时间标签。您可能希望通过dateTimeLabelFormats控制数据标签的格式。

回答by YMomb

As stated in a previous answer, by default,

如之前的回答所述,默认情况下,

Highcharts will only show the last data point that is specified.

Highcharts 将仅显示指定的最后一个数据点。

However, as you can see on default jsfiddle for min max setting, you have to specify both in addition to min and max that endOnTick and startOnTick are false. Moreoever, when dealing with missing data on datetime types, you'd to set ordinal to false in order to let space for empty data.

但是,正如您在min max setting 的默认 jsfiddle上看到的那样,除了 min 和 max 之外,您还必须指定 endOnTick 和 startOnTick 为假。此外,在处理日期时间类型的缺失数据时,您需要将 ordinal 设置为 false 以便为空数据留出空间。

It means that your xAxis should look like below:

这意味着您的 xAxis 应如下所示:

xAxis : {
    allowDecimals : false,
    endOnTick : false,
    max : /** Date in timestamp for the end the day */,
    min : /** Date in timestamp for the beginning the day */,
    ordinal : false,
    startOnTick : false,
    type : 'datetime'
},