Вопрос Highcharts.js: возможно ли добавить пустое пространство слева и справа от графика, которое будет видно только во время панорамирования?

Question

Я разрабатываю проект с использованием библиотеки Highstock.js.Мне нужно отобразить пустое пространство (скажем, равное 1 дню (86400000 мс) по оси x) от самых левых и правых частей диаграммы, которые будут видны только во время панорамирования на самые левые или правые (https://prnt.sc/lyqshz). I)не нужно устанавливать поля графика (https://api.highcharts.com/highstock/chart.margin). Я пытался решить эту проблему, установив 'min' и 'max' для xAxis как:

xAxis: {
    min: ohlc[0].x - ONE_DAY_MS,
    max: ohlc[ohlc.length - 1].x + ONE_DAY_MS,
},

, но это не сработало. ПожалуйстаПосоветуйте, если это возможно, и как это можно сделать. Спасибо!

Вот полный пример кода:

var ohlc = JSON.parse(ohlcStringified),
    volume = JSON.parse(volumeStringified);
var ONE_DAY_MS = 24 * 60 * 60 * 1000;

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

    navigator: {
        enabled: false,
        height: 0
    },

    scrollbar: {
        enabled: false
    },

    xAxis: {
        min: ohlc[0].x - ONE_DAY_MS,
        max: ohlc[ohlc.length - 1].x + ONE_DAY_MS,
    },
    yAxis: [{
        height: '60%'
    }, {
        top: '60%',
        height: '40%',
        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,
        }
    }]
});

function chartZoomIn(chart) {
    var min = chart.xAxis[0].getExtremes().min;
    var max = chart.xAxis[0].getExtremes().max;

    var diff = max - min;
    var step = 0.05 * diff;
    var newMin = min + step;
    var newMax = max - step;

    chart.xAxis[0].setExtremes(newMin, newMax);
}

function chartZoomOut(chart) {
    var min = chart.xAxis[0].getExtremes().min;
    var max = chart.xAxis[0].getExtremes().max;
    var candlestickXData = chart.get('candlestick').xData;
    var zoomInMin = candlestickXData[0];
    var zoomInMax = candlestickXData[candlestickXData.length - 1];

    var diff = max - min;
    var step = 0.05 * diff ;
    var newMin = min - step;
    var newMax = max + step;

    if (newMin <= zoomInMin || newMax >= zoomInMax) {
        chart.zoomOut();
    } else {
        chart.xAxis[0].setExtremes(newMin, newMax);
    }
}
$('.zoom-in').click(function() {
    chartZoomIn(chart);
})
$('.zoom-out').click(function() {
    chartZoomOut(chart);
})
$('.full-zoom-out').click(function() {
    chart.zoomOut();
})

Демонстрационная версия: http://jsfiddle.net/ogorobets/82adzfhL/25/

Обновление 1:

Для xAxis есть опция 'overscroll' (https://api.highcharts.com/highstock/xAxis.overscroll).). Позволяет отображать пустое пространство в правой части графика.Не понятно, как реализовать такое же поведение для случая, когда пользователь перемещается по левому краю диаграммы. Я попытался решить последнюю проблему, установив параметр minPadding равным 0,2, но это не решило проблему.

xAxis: {
    minPadding: 0.2,
    overscroll: 60 * 60 * 1000
},

Вот живая демоверсия: http://jsfiddle.net/ogorobets/82adzfhL/33/

Answer 1

Чтобы показать дополнительное пустое пространство слева и справа от области графика, вы можете добавить точки со значением null.Проверьте демоверсию, размещенную ниже.

Код:

var data = [
  [1542292200000, 191.41],
  [1542378600000, 193.53],
  [1542637800000, 185.86],
  [1542724200000, 176.98],
  [1542810600000, 176.78],
  [1542983400000, 172.29],
  [1543242600000, 174.62],
  [1543329000000, 174.24],
  [1543415400000, 180.94],
  [1543501800000, 179.55],
  [1543588200000, 178.58],
  [1543847400000, 184.82],
  [1543933800000, 176.69],
  [1544106600000, 174.72],
  [1544193000000, 168.49],
  [1544452200000, 169.6],
  [1544538600000, 168.63],
  [1544625000000, 169.1],
  [1544711400000, 170.95],
  [1544797800000, 165.48],
  [1545057000000, 163.94],
  [1545143400000, 166.07],
  [1545229800000, 160.89],
  [1545316200000, 156.83],
  [1545402600000, 150.73],
  [1545661800000, 146.83],
  [1545834600000, 157.17]
];

for (var i = 0; i < 5; i++) {
  data.unshift([
    data[0][0] - 24 * 60 * 60 * 1000,
    null
  ]);

  data.push([
    data[data.length - 1][0] + 24 * 60 * 60 * 1000,
    null
  ]);
}

console.log(data);
Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 0
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
});

Демо:
https://jsfiddle.net/BlackLabel/4ztrm7cg/1/