Вопрос Highcharts.js: можно ли всегда держать некоторую часть графика в видимой области, даже если установлена ​​опция "overscoll"

Question

Мне нужно показать пустое пространство в крайнем правом углу графика.Для этого я использую опцию «overscroll» (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, где вы можете проверить, превышает ли текущий минимум оси ваш предел (значение меньше максимального значения xData).Когда это правда, установите новые крайние значения осей с вашим пределом в качестве минимального значения.Проверьте код и демоверсию, размещенную ниже.

Код:

  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