时间戳

首页 > 解决方案 > 为什么 highcharts 在重新渲染时会缩小？

reactjs - 为什么 highcharts 在重新渲染时会缩小？

问题描述

我正在使用 highcharts-react-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({});

如果需要，我可以发布图表配置，但这没什么太花哨的。

我找不到其他人遇到这个问题，并且一直在寻找答案。

标签： reactjsreact-highcharts

解决方案

事实证明，它确实是我传递给组件的一个 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,
    };

另外这里是完整的选项文件供参考。这不仅仅是导致它的滚动条选项。这是我通过尝试用新图表重新创建问题时发现的特定选项组合。

推荐阅读