AnyChart-react 图在第二次渲染时消失

Question

我正在尝试在我的 React 应用程序中使用任何图表。图表在启动时呈现良好，但在重新呈现时消失。这是图表 class 的精简代码，这是目前在应用程序中呈现的唯一内容。

class TimeSeriesPlot extends Component {

 constructor(props) {
    super(props);
    this.chartInstance = anychart.scatter();
    this.chartInstance.xAxis().title('Time (s)');
    this.chartInstance.legend(true);
    this.chartInstance.line([{x: 1, value: 2}, {x: 2, value: 6}]);
 }

 render() {        
    console.log('rendering chart');
    return (
        <AnyChart instance={this.chartInstance} height={600} />
    );
 }
}

重新渲染是由应用程序中的超时功能触发的（它通过 redux 存储更改道具）。我想要做的是创建一个实时绘图，每次更新数据时都会重新渲染，但首先我需要让绘图保持实时状态以进行多次渲染。

感谢任何帮助！

Answer 1

如果您想用新数据更新图表，则无需再次创建和重新呈现整个图表。您只需要像这样更新系列数据：

class TimeSeriesPlot extends Component {

constructor(props) {
super(props);
this.chartInstance = anychart.scatter();
this.chartInstance.xAxis().title('Time (s)');
this.chartInstance.legend(true);
this.series = this.chartInstance.line([{x: 1, value: 2}, {x: 2, value: 6}]);
}

render() {        
console.log('rendering chart');
return (
    <AnyChart instance={this.chartInstance} height={600} />
);
}

updateData() {
this.series.data([{x: 1, value: 4}, {x: 2, value: 3}]);
}
}

AnyChart-react 图在第二次渲染时消失

AnyChart-react plot disappears on second render

reactjs

anychart