Сюжет AnyChart-реакции исчезает при втором рендере

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} />
    );
 }
}

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

Любая помощьоценили!

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}]);
}
}