javascript - Highcharts/高库存 : How to manually set the X-axis range

Question

我正在尝试手动设置 x 轴范围。所以，我的 x 轴需要采用小时/分钟的格式，并且应该是从 0 小时到 48 小时，每个刻度增加 15 分钟，这样它就是 0, 15 , 30, 45, 1:00, 1 :15, 1:30, 1:45, 2:00..... 到 48:00

我不确定该怎么做，我正在从外部 Json 文件中提取数据。

在我的 JavaScript 中，这是我拥有的

$(function () {

            $.getJSON('JsonFile.json', function (data) {

                var processedData = [];
                Highcharts.each(data, function (d) {
                    processedData.push(d.X);
                });

                // Create the chart
                $('#container').highcharts('StockChart', {
                    rangeSelector: {
                        selected: 1
                    },

                    title: {
                        text: 'X'
                    },

                    series: [{
                        data: processedData,
                        pointStart: Date.UTC(2010, 1, 1),
                        pointInterval: 1000 * 60 * 15 // Every 15 minute. 1000 miliseconds in 1 second, 60 seconds for 1 minute.
                    }],

                    xAxis: {
                         floor: 0,
                         ceiling: 1000 * 60 * 60 * 48,
                         type: 'datetime',
                         dateTimeLabelFormats: {
                         hour: '%H:%M'
                        }
                    }

                });
            });

        });

现在的样子，它不绘制图形，给我一个空图形，如图所示 enter image description here

Answer 1

更新 2

我更新了 fiddle 以在 48 小时的时间跨度内传播任意数量的数据点。要每 15 分钟放置一个刻度标签，您可以将 tickInterval: 1000*60*15 添加到您的 xAxis 选项中。但是，如果没有足够的可用空间，Highcharts 将不会呈现所有标签(即便如此，指定此设置后它可能会非常困惑，请自行查看。)

参见 updated fiddle了解详情。

---

别忘了查看 HighCharts Documentation和 API Reference , 他们会很有帮助 :-)