Гистограмма highcharts исчезает при обновлении с 10.2.1 до 10.3.1

В настоящее время я пытаюсь обновить highcharts до последней версии, но столкнулся с проблемой.

У меня есть гистограмма со следующей конфигурацией:

{
            chart: {
                type: 'bar',
                height: 70,
                pointPadding: 0,
            },
            title: {
                text: null,
            },
            credits: {
                enabled: false,
            },
            xAxis: {
                type: 'datetime',
                visible: false,
            },
            yAxis: {
                type: 'datetime',
                min: startTime,
                max: endTime,
                visible: true,
                opposite: false,
                endOnTick: true,
                ordinal: false,
                minPadding: 0,
                maxPadding: 0,
                tickInterval: tickIntervalMs,
                minTickInterval: tickIntervalMs,
                reversedStacks: false,
                title: {
                    text: null,
                },
                labels: {
                    style: {
                        color: mfTheme.colorPalette.n500,
                    },
                    // This makes sure that the times are displayed in the correct timezone
                    formatter() {
                        return moment((this as any).value)
                            .tz(institutionTimezone)
                            .format('LT');
                    },
                },
            },
            time: {
                timezone: institutionTimezone,
                moment,
            },
            legend: {
                enabled: false,
            },
            tooltip: {
                borderWidth: 0,
                borderRadius: 24,
                backgroundColor: '#FFFFFF',
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 50,
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                },
            },
            series,
        }
}

и он отлично отображается до версии 10.2.1.

Однако при обновлении до Highcharts 10.3.1 полоса просто исчезает, ничего не показывая. (скриншот не нужен, он просто весь белый)

исследуя диаграмму, оказывается, что все элементы имеют высоту и ширину 0.

Я запускаю это с помощью highcharts-react-official.

Я зашел так далеко, что изучил изменения PR в примечаниях к обновлению, но не смог найти ни одного PR, который дал бы мне какие-либо подсказки относительно того, что на самом деле идет не так в новой версии.

как сделать так, чтобы диаграмма снова появилась?

коды и коробка воспроизводимы:

https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-s82pdf?file=%2Fdemo.jsx

Привет! Поскольку вы используете некоторые переменные, которые не указаны в коде, не могли бы вы воспроизвести проблему в онлайн-демо? Вы можете начать здесь: codeandbox.io/p/sandbox/highcharts-react-demo-e1ue3

magdalena 17.06.2024 12:36

Отличная идея. Обновил проблему

Dominik Reinert 18.06.2024 08:54

@magdalena, однако это не точный код, поскольку я использую функциональные компоненты машинописного текста.

Dominik Reinert 18.06.2024 08:55

Спасибо за обновление вашего вопроса. Я проанализировал это и добавил ответ.

magdalena 18.06.2024 18:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
89
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно API, yAxis.min должен быть числом. Я не уверен, почему это работало в предыдущих версиях; возможно, это был пробел в наборе текста, который с тех пор был исправлен. Правильным способом предоставления минимального значения yAxis будет, например, метка времени, как и в случае с yAxis.max.

Демо: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-5623sy?file=%2Fdemo.jsx%3A31%2C1

Ссылка на API: https://api.highcharts.com/highcharts/yAxis.min

О блин, столько времени потрачено впустую из-за отсутствия поддержки машинописного текста :( Спасибо за ответ! Вы знаете, есть ли доступные наборы текста?

Dominik Reinert 20.06.2024 16:45

Я не уверен, правильно ли я понимаю. Я имел в виду, что число является единственным правильным типом для yAxis.min, поэтому строковая дата должна быть проанализирована, например, до метки времени, перед использованием. TypeScript полностью поддерживается.

magdalena 20.06.2024 21:24

Другие вопросы по теме