如何在不重新渲染组件的情况下将Plotly实时更新图与React JS集成

Question

我想在我的网络应用程序中使用React JS和plotly。我想用图表来绘制实时数据的图形，但我希望每次添加新点时都避免完全重新绘制图形。 Plotly图表具有更新功能，因此不会破坏/重新呈现整个图形。

所以我有几个问题。 1.是否可以使用反应组件来表示图形图并让它在不完全重新绘制图形的情况下实时更新？ 2.如果无法解决上述问题，是否有解决方法？

由于

Answer 1

当用于更新绘图的数据发生更改时，您可以使用shouldComponentUpdate来阻止组件重新呈现。我目前正在使用基于画布的项目做到这一点，所以它也应该与情节一起使用。

编辑：我的shouldComponentUpdate看起来像这样，基本上我只需要重新渲染画布，如果它给出的大小不是在数据改变时改变的。

  shouldComponentUpdate(nextProps) {
    if (this.props.height !== nextProps.height ||
       this.props.width !== nextProps.width) {
      return true;
    }

    return false;
  }

Answer 2

回答您的问题：

1-是的，您可以，Plot.ly为此提供一个NPM库，react-plotly.js，您可以在docs

中查看更多详细信息。

要使用实时更新，您需要准备React组件以处理该问题，正确管理React Lifecycle并使用Plot.ly图形更新，对此进行详细介绍post。