Highcharts/Highstocks:如何手动设置X轴范围

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 选项。但是，如果没有足够的 space 可用，Highcharts 将不会呈现所有标签（即使如此，指定此设置可能会非常混乱，请自行查看。）

详情见updated fiddle。

别忘了查看 HighCharts Documentation and API Reference，它们会很有帮助:-)

Answer 2

您可以使用xAxis.labels.formatter，例如：http://jsfiddle.net/cgoz4shr/1/

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function(){
      var minutes = Highcharts.dateFormat('%M', this.value),
          days = parseInt(Highcharts.dateFormat('%d', this.value)) - 1,
          hours = days * 24 + parseInt(Highcharts.dateFormat('%H', this.value));

      return hours + ':' + minutes;
    }
  }
}

参考 Highcharts.dateFormat.

当然你可以修改返回的内容，比如你可以去掉hours if hours == 0等

Highcharts/Highstocks:如何手动设置X轴范围

Highcharts/Highstocks: How to manually set the X-axis range

html

javascript

css

highcharts

highstock

更新 2