Ошибка горизонтальной прокрутки Highcharts с типом datetime ⇐ Javascript

[Гость]

У меня есть диаграмма highcharts, использующая версию 11.
На двух панелях представлены две серии: свеча вверху и столбец с объемами на нижней панели.

Я хочу отображать весь день, поэтому я использовал тип datetime для серии x и определил интервал тика в 5 минут. Пока все хорошо, все работает корректно, кроме режима прокрутки:
[*]
Как только я выхожу за пределы области, где у меня есть данные, и возвращаюсь обратно, происходит странное поведение, как показано на картинке ниже
[*]
Прокрутка колесиком мыши не работает
[*]
Панорамирование не работает (поскольку оно находится за пределами области данных)

Скрипт ошибки (https://jsfiddle.net/8g745vxr/0/)

js:

// конфигурация const currentDate = новая дата(); const dayStart = новая дата (currentDate).setHours (0, 0, 0, 0); const dayEnd = новая дата (currentDate).setHours (23, 59, 59, 999); const TradingDayStart = новая дата (currentDate).setHours (9, 25); const TradingDayEnd = новая дата (currentDate).setHours (16, 5); константное увеличениеМин = 5; const xTickInterval = увеличениеМин * 60 * 1000; пусть yVolumeTickInterval = 100; пусть minTimeWithValue, максTimeWithValue, минценазначение, МаксЦенаЗначение, maxVolumeValue = ноль; // Конфигурация КОНЕЦ // симуляция консоль.очистить(); константные данные = createData( новая дата(currentDate).setHours(9, 30), новая дата(currentDate).setHours(11, 30)); функция createData(startTime, endTime) { пусть время = DayStart; пусть rangeStart = ноль; пусть rangeEnd = ноль; пусть цена = { открыто: 100, высокий: 120, низкий: 90, закрыть: 110 }; пусть объем = 500; пусть результат = [[], [], []]; пусть upDownSwitch = ложь; пусть я = 0; while (время endTime) { // ------------- ДАННЫЕ ДЛЯ КАЖДОГО МОМЕНТА ВРЕМЕНИ // результат[0].push([время, ноль, ноль, ноль, ноль]); // результат[1].push([время, ноль]); // ------------- ДАННЫЕ ДЛЯ КАЖДОГО МОМЕНТА ВРЕМЕНИ время = время + увеличениеМин * 60 * 1000; } еще { если (я % 5 === 0) { upDownSwitch = !upDownSwitch; } result[0].push([время, цена.открытие, цена.высокая, цена.низкая, цена.закрытие]); result[1].push([время, объём]); время = время + увеличениеМин * 60 * 1000; громкость = upDownSwitch ? громкость + 100: громкость – 100; цена.открытие = цена.закрытие; цена.высокий = upDownSwitch ? цена.закрытие + 20 : цена.закрытие + 10; цена.low = upDownSwitch ? цена.открытие - 10 : цена.закрытие - 20; цена.закрытие = upDownSwitch ? цена.закрытие + 10 : цена.закрытие - 10; если (rangeStart == null) {rangeStart = результат [0].length - 1; } я++; } } если (rangeEnd == null) {rangeEnd = rangeStart + я - 1; } вернуть результат; } // КОНЕЦ моделирования // подготовка данных если (данные) { если (данные[0]) { minTimeWithValue = Math.min(...data[0].filter(x => x[1]).map(x => x[0])); maxTimeWithValue = Math.max(...data[0].filter(x => x[1]).map(x => x[0])); minPriceValue = Math.min(...data[0].filter(x => x[1]).map(x => Math.min(...[x[1], x[2], x[ 3], x[4]]))); maxPriceValue = Math.max(...data[0].filter(x => x[1]).map(x => Math.max(...[x[1], x[2], x[ 3], x[4]]))); } если (данные[1]) { maxVolumeValue = Math.max(...data[1].filter(x => x[1]).map(x => x[1])); если (maxVolumeValue > 1000000) {yVolumeTickInterval = 100000; } иначе, если (maxVolumeValue > 1000) {yVolumeTickInterval = 1000; } } } // подготовка данных КОНЕЦ varchart = Highcharts.stockChart('контейнер', { диаграмма: { высота: ноль, МаржаПраво: 50, панорамирование: { тип: 'xy' }, события: { нагрузка: функция () { console.log('загружено'); this.xAxis[0].setExtremes(tradingDayStart, TradingDayEnd); } } }, ось x: { введите: 'дата-время', тикИнтервал: xTickInterval, minRange: xTickInterval * 5, мин: начало дня, максимум: деньКонец, метки: { формат: '{значение:%H:%M}' } }, ось y: [ { высота: '80%', сеткаЛинеВидс: 0,5, мин: minPriceValue * 0,9, макс: maxPriceValue * 1,1, showLastLabel: правда, ярлыки: { х: 0, й: 4, выровнять по левому краю', формат: '{значение:.2f}', стиль: { fontSize: '9pt' } } }, { вверху: «80%», высота: '20%', мин: 0, макс: максобомезначение * 1,2 } ], ряд: [ { ось: 0, тип: 'подсвечник', данные: данные[0], цвет: '#ed454a', upColor: '#8cc176', ширина линии: 1, lineColor: '#3e3e3e' }, { ось: 1, тип: «столбец», данные: данные[1] } ] }); css:

#container { ширина: 100%; высота: 100вх; } html:

Это работает правильно, если у меня есть данные для каждого момента времени (с нулевыми значениями для оси y).
Но я думаю, что это не то, для чего был добавлен тип datetime для xAxis -> иметь временной диапазон без добавления точек данных для каждого времени:

Скрипт Null Datapoint (https://jsfiddle.net/8g745vxr/1/) (см. строку JS 45/46)

Итак, есть ли способ добиться такого поведения, не имея данных для каждой точки данных на оси x, как во второй скрипке? Очень ценю любую помощь!