【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-26
      • 2011-04-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多