網站搜尋

javascript - 從 10.2.1 升級到 10.3.1 時 Highcharts 長條圖消失


我目前正在嘗試將 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 能給我任何線索,讓我了解新版本到底出了什麼問題。

我該怎麼讓圖表重新出現?

codesandbox 可重現:

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

答案#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