Highcharts.js问题：是否有可能保持始终可见区域图的某些部分，即使“overscoll”选项设置

Question

我需要表现出一定的空余空间，以图表的最右边。要做到这一点我用“反弹时”选项（https://api.highcharts.com/highstock/xAxis.overscroll）。但是，如果在图表和平底锅图表最右边有可无阴阳烛图的任何部分空空间用户缩放显示（https://screencast-o-matic.com/watch/cqnfFq3CII）。请告知是有可能实现下面的图表行为，以及如何这样做：保持始终可见区域图的某些部分，即使“overscoll”选项设置和用户锅图最右边？谢谢！

这里是我的代码：

var ohlc = JSON.parse(ohlcStringified),
    volume = JSON.parse(volumeStringified);
var interval = ohlc[ohlc.length - 1].x - ohlc[ohlc.length - 2].x;

var chart = Highcharts.stockChart('container', {
    chart: {
        borderWidth: 1,
        panning: true,
    },
    title: {
        text: 'Chart'
    },
    legend: {
        enabled: true
    },
    rangeSelector: {
        selected: 1,
        enabled: false
    },

    scrollbar: {
        enabled: false
    },

    xAxis: {
        minPadding: 0.2,
        overscroll: 50 * interval,
    },
    yAxis: [{
        height: '40%'
    }, {
        top: '40%',
        height: '30%',
        offset: 0
    }, {
        top: '70%',
        height: '30%',
        offset: 0
    }],

    series: [{
        type: 'candlestick',
        id: 'candlestick',
        name: 'AAPL',
        data: ohlc,
        tooltip: {
            valueDecimals: 2
        },
        dataGrouping: {
            enabled: false,
        }
    }, {
        type: 'column',
        id: 'volume',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            enabled: false,
        }
    }]
});

下面是现场演示：http://jsfiddle.net/ogorobets/bfcs9gx7/2/

Answer 1

这是可能的，但是，它需要一些定制逻辑。它可以通过xAxis.events.afterSetExtremes回调在那里你可以检查当前轴最低比你的极限（值低于最大外部数据值）更大来实现。如果这是真的，你的极限最小值设置新中轴线的极端。检查代码及以下试玩公布。

码：

  xAxis: {
    minPadding: 0.2,
    overscroll: 50 * interval,
    events: {
        afterSetExtremes: function() {
        var chart = this.chart,
            xData = chart.series[0].xData,
            maxValue = xData[xData.length - 5],
            min = chart.xAxis[0].min,
            max = chart.xAxis[0].max

        if (min > maxValue) {
          chart.xAxis[0].setExtremes(maxValue, max, true, false);
        }
      }
    }
  }

演示：

• https://jsfiddle.net/BlackLabel/p6d73nk8/

API参考：

• https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
• https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes