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'
                        }
                    }

                });
            });

        });

它現在的方式，它沒有繪制圖形，給我一個空圖，如圖所示輸入圖像描述

Answer 1

更新2

我更新了小提琴，在48小時的時間內傳播任意數量的數據點。 要每15分鍾放置一個刻度標簽，您可以在您的xAxis選項中添加tickInterval: 1000*60*15 。 但是，如果沒有足夠的可用空間，Highcharts將不會渲染所有標簽（即使如此，指定此設置也會非常混亂，請親自看看。）

有關詳細信息，請參閱更新的小提琴

---

不要忘記查看HighCharts文檔和API參考 ，它們可能非常有用:-)

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 == 0等，您可以刪除hours hours == 0 。