Highcharts / Highstock 滚动默认位置答案

【问题标题】：Highcharts / Highstock scroll default positionHighcharts / Highstock 滚动默认位置
【发布时间】：2016-12-15 11:40:21
【问题描述】：

我有一个与这个非常相似的滚动条的 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
            }
        }]
    });

我希望默认滚动位置在图表中间的某个位置，有什么办法吗？

【问题讨论】：

标签： highcharts highstock

【解决方案1】：

您可以在chart.events.load 呼叫中使用xAxis.setExtremes 执行此操作。一个简单的例子（使用任意 1 年范围）：

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

例如jsFiddle。

如果您需要确定您的“中间”是什么，它可以取决于您可以在哪里预先计算它的数据源，或者您也可以在 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');

请注意，我添加/减去 1.5 个月是为了使您的 3 个月范围选择器有效。 moment.js 库将这些时间四舍五入到 2 个月。你明白了。所以你的setExtremes 变成：

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

这里是直播jsFiddle。

【讨论】：