时间戳

首页 > 解决方案 > highcharts-react-react 状态的官方渲染问题

javascript - highcharts-react-react 状态的官方渲染问题

问题描述

我刚刚将 highcharts-react-official (1.1.0) 实现为无状态 React (16.0.0) 组件。

'chartData' 是使用父应用程序的状态呈现的，该状态可以根据报告而改变，但是当我的 HighchartsWrapper 组件正在呈现时，它似乎忽略了对 'chartData' 的更改并且不会呈现正确的（最新）数据。应用作为道具传递的其他配置数据（例如图表类型） 当 I 时console.log(props.chartData)，我可以看到数据是正确的。未呈现的“chartData”更改通常是图表上系列数发生更改的更改。

我错过了什么吗？提前致谢。

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const HighchartsWrapper = (props) => {
   console.log(props.chartData); // this is always correct

    let options = {
        title: { text: 'My chart' },
        series: props.chartData
    }

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

export default HighchartsWrapper;

标签： javascriptreactjshighcharts

解决方案

此问题已由新的包装器版本修复。出现问题是因为包装器中不可能手动设置函数的oneToOne参数Chart.update()。现在您可以简单地将oneToOne={true}as 组件属性设置为。然后它可以正常工作。

现场示例：https ://stackblitz.com/edit/react-yctlyw?file=Chart.js

此致！

推荐阅读