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

我更新了小提琴以在 48 小时的时间跨度内分布任意数量的数据点。要每 15 分钟放置一个刻度标签，您可以将 tickInterval: 1000*60*15 添加到您的 xAxis 选项中。但是，如果没有足够的可用空间，Highcharts 将不会呈现所有标签（即使指定此设置，它也会变得非常混乱，请自行查看。）

详情请参阅updated fiddle。

---

别忘了查看HighCharts Documentation 和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如果hours == 0等可以去掉。