Highcharts / Highstock 滚动默认位置

Question

我有一个 HighStock 收费，其滚动条与这个非常相似

http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/navigator-disabled/

    Highcharts.stockChart('container', {


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        navigator: {
            enabled: false
        },

        series: [{
            name: 'AAPL Stock Price',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });

我希望默认滚动位置位于图表中间的某个位置，有什么办法可以做到这一点吗？

Answer 1

您可以通过 xAxis.setExtremes on the chart.events.load 调用来完成此操作。一个简单的例子（使用任意 1 年范围）：

  chart: {
    events: {
      load: function() {
        this.xAxis[0].setExtremes(
          Date.UTC(2013, 0, 1),
          Date.UTC(2013, 11, 31)
        );
      }
    }
  },

例子jsFiddle.

如果您需要确定您的 "middle" 是什么，它可以取决于您的数据源，您可以在其中预先计算它，或者您也可以在 chart.events.load 调用中进行计算。

为了好玩，我添加了中点计算。这使用 moment.js 因为它比滚动你自己的时间方法容易得多。

minX = data[0][0];
maxX = data[data.length - 1][0];
midX = minX + ((maxX - minX) / 2);

var midDate = new Date(midX);
var startDate = moment(midDate);
var endDateMoment = moment(midDate);
startDate.subtract(1.5, 'months');
endDateMoment.add(1.5, 'months');

请注意，我 addinng/subtracting 1.5 个月才能使您的 3 个月范围选择器有效。 moment.js 图书馆将这些时间四舍五入到 2 个月。你明白了。所以你的 setExtremes 变成：

    this.xAxis[0].setExtremes(
      startDate.valueOf(), //.valueOf() in this context converts to javascript time
      endDateMoment.valueOf()
    );

这是直播 jsFiddle。

Highcharts / Highstock 滚动默认位置

Highcharts / Highstock scroll default position

highcharts

highstock