Question

我正在尝试在我的应用程序中使用anychart。该图表在启动时可以很好地渲染，但是在重新渲染时会消失。这是图表类的精简代码，这是当前在应用程序中唯一呈现的代码。

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反应图在第二个渲染时消失

1 个答案: