在 react-native 中绘制折线图的最高效方式答案

【问题标题】：most performant way of drawing line chart in react-native在 react-native 中绘制折线图的最高效方式
【发布时间】：2020-04-23 17:16:24
【问题描述】：

我想知道以非常高的频率（每 15 毫秒新值）绘制具有流数据的实时折线图的最高效方法是什么。我通过 BLE 获取数据，并添加到我永远不会超过 500 个项目的数组中。我需要从这些数据中获得大约 10 个不同的折线图。

整体情况如下： * 每 15ms 的数据流 * 我将它作为array[500] 保存在redux store 中（当有新元素和array.length >= 500 时删除第一个元素 * 必须将数据显示为 10 个独立的折线图

我正在使用react-native-svg-charts，按预期工作，但是当有 500 个点并且第一个点正在改变（因为我正在删除它）时，图表会重新呈现自身并且整个视图变得滞后（~20fps）。

我想知道使用setNativeProps（在<Path /> 上来自react-native-svg）会在这个场景中有所帮助，但我不确定它是否是最高效的方式。如果你有更好的想法和建议（比如使用react-native-art），请告诉我，我需要在这个视图中有 ~60fps。

最好的

【问题讨论】：

标签： javascript react-native data-visualization react-native-svg react-native-svg-charts

【解决方案1】：

我最近在这里回答了一个类似的问题：Real-time data update chart in React Native 并会在这里提出相同的建议。

在使用我尝试过的所有基于 SVG 的库（包括 react-native-svg-charts）在 React Native 中进行绘图时，我一直在努力提高性能。我不确定您可以做很多事情来实现您正在寻找的基于 SVG 的图表的性能。

我最近决定尝试在WebView 中使用几个基于画布的绘图库，结果非常好。我最终制作了一个简单的包：https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts。

如果你不想使用这个包，而是自己做，这很简单。虽然包源代码可能是最好的资源，但我将总结以下步骤：

创建一个 HTML 文件并将其导入到您的组件中：
```
const htmlTemplate = require("./index.html");
```
其中 HTML 包含所选图表库的 JavaScript。上面的链接包目前支持Chart.js v3 和uPlot。在下面的步骤中，我将展示一个 Chart.js 配置。
创建一个引用，例如let webref。

创建一个WebView 和onLoadEnd，您可以将一些JavaScript 注入WebView 来配置和创建您的图表

<WebView
  originWhitelist={["*"]}
  ref={r  => (webref = r)}
  source={htmlTemplate}
  onLoadEnd={() => { addChart(config) }}
/>

其中addChart 看起来像：

const addChart = config => {
  webref.injectJavaScript(`const el = document.createElement("canvas");
    document.body.appendChild(el);
    window.canvasLine = new Chart(el.getContext('2d'), ${JSON.stringify(config)});`);
};

config 是一个有效的 Chart.js 配置。

要更新图表数据，只需注入一些 JavaScript 来更新数据。对于这里的 Chart.js，看起来像：

const setData = dataSets => {
  if (dataSets) {
    dataSets.forEach((_, i) => {
      webref.injectJavaScript(`window.canvasLine.config.data.datasets[${i}].data = ${JSON.stringify(dataSets[i])};
      window.canvasLine.update();`);
    });
  }
};

其中dataSets 是有效的 Chart.js 数据集。

就是这样！我只通过https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts 包玩过这两个绘图库，但到目前为止性能非常好，即使对所有传递的图表数据进行了 JSON 字符串化。我还没有彻底量化它，但是这两个库的性能比我尝试过的任何基于 SVG 的库都高出几个数量级。

【讨论】：