Почему старшие графики уменьшаются при повторном рендеринге? - PullRequest
Новая
       5

Почему старшие графики уменьшаются при повторном рендеринге?

0 голосов
/ 09 октября 2019

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

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

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({});

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

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

1 Ответ

0 голосов
/ 10 октября 2019

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

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,
    };

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

...