Почему highcharts сжимается при повторном рендеринге?

Я использую highcharts-react-official для рендеринга компонента HighchartsReact. Он отображается и работает должным образом, пока я не перерисую компонент. При изменении состояния диаграмма будет уменьшаться по вертикали.

Я экспериментировал с настройкой перекомпоновки в параметрах диаграммы, а также с переключением флагов allowChartUpdate и immutable на самом компоненте, но безрезультатно.

const ChartView = props => {
    const { data } = props;
    if(data.highstockData && data.startDate && data.endDate) {
        const min = parseInt(moment(data.startDate, 'x').startOf('day').format('x'));
        const max = parseInt(moment(data.endDate, 'x').startOf('day').format('x'));
        const chartOptions = getChartConfig(data.highstockData,  min, max);

        return (
            <HighchartsReact
                highcharts={Highcharts}
                options={chartOptions}
            />
        )
    }
    return null;
};

И возврат рендеринга родительского компонента:

return (
    <div className="vertical-margin">
        {isFetching && !data && <LoadingView/>}
        {hasError && !data && <ErrorView/>}
        {
            data &&
            <React.Fragment>
                {buttonRow}
                <ChartView
                    data={data}
                />
            </React.Fragment>
        }
    </div>
)

Как я уже сказал, повторный рендеринг по любой причине приводит к уменьшению высоты верхней диаграммы при каждом повторном рендеринге. Для тестирования я вызываю эту строку:

this.setState({});

Я мог бы опубликовать конфигурацию диаграммы, если это необходимо, но в этом нет ничего особенного.

Я не смог найти никого, у кого была бы эта проблема, и рвал на себе волосы в поисках ответа.


reactjs react-highcharts
person Dylan    schedule 09.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказалось, что это действительно опция highchart, которую я передал компоненту. Видимо это было потому, что этот вариант:

scrollbar: {
    enabled: true
},

Не был вложен в раздел опций xAxis, как это должно быть. Он по-прежнему правильно создавал полосу прокрутки, но вызывал эту странную проблему сжатия при рендеринге компонента.

chart: {
            marginRight: 75,
            ignoreHiddenSeries: false,
            panning: false,
            spacingTop: 10,
            height: `${Constants.HIGHCHART_TABLE_HEIGHT}px`,
        },
        time: {
            useUTC: false
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        legend: {
            align: 'left',
            enabled: true,
            itemMarginTop: 5,
            itemStyle: {
                "color": "#333333",
                "cursor": "pointer",
                "fontSize": "12px",
                "fontWeight": "normal",
                "width": "240px"
            },
            layout: 'vertical',
            verticalAlign: 'top',
            y: 0
        },
        navigator: {
            enabled: false,
            xAxis: {
                tickPixelInterval: 100
            }
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: true,
                    fillColor: "#ffffff",
                    lineColor: null,
                    lineWidth: 1
                }
            }
        },
        rangeSelector: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                const sortedPoints = this.points.sort((a, b) => {
                    return a.point.legendOrder - b.point.legendOrder
                });
                return [
                    '<b>',
                    moment(this.x, 'x').format('MM/DD/YYYY HH:mm'),
                    '</b><br/>',
                    sortedPoints.map((item) => {
                        return [
                            '<br/><span style="color:'+ item.series.color +';">\u258c</span> ',
                            '<span>' + item.series.name + '</span>: <b>' + item.y + '</b>',
                            item.comments ? '<p>(' + item.comments + ')</p>' : ''
                        ].join('');
                    }).join('')
                ].join('');
            },
            shared: true,
            crosshairs: {
                color: '#ddd',
                dashStyle: 'solid'
            },
        },
        xAxis: {
            type: 'datetime',
            labels:{
                formatter: function() {
                    const parsed = moment(this.value, 'x');
                    return parsed.format('HH:mm') + '<br/>' + parsed.format('MM/DD');
                }
            },
            min,
            max,
            reversed: true,
            scrollbar: {
                enabled: true
            },
        },
        yAxis: [{
            alignTicks: false,
            max: 60,
            min: 0,
            opposite: false,
            tickInterval: 5,
            title: {
                text: ''
            }
        }, {
            alignTicks: false,
            max: 300,
            min: 0,
            opposite: true,
            tickInterval: 25,
            title: {
                text: ''
            }
        }],

        //The below properties are watched separately for changes.
        series: data,
        title: {
            text: ''
        },
        loading: false,
    };

Также здесь приведен полный файл опций для справки. Причиной этого была не только эта опция полосы прокрутки. Это была определенная комбинация вариантов, как я обнаружил, пытаясь воссоздать проблему с новой диаграммой.

person Dylan    schedule 10.10.2019