React Native 中的实时数据更新图表答案

【问题标题】：Real-time data update chart in React NativeReact Native 中的实时数据更新图表
【发布时间】：2020-08-29 07:21:10
【问题描述】：

我需要在 react native 中创建一个图表，它每 500 m/s 从本地模块获取数据（整数数组）并在实时更新中绘制它们，为此我使用了“react-native-svg”，我实际上可以更新图表，但性能很慢，而且经常崩溃。

结果数组最多接受 1800 个结果，之后图表会滚动

...
 const [data, setData] = useState(new Array(1800).fill(0));
...

在监听器中从本机模块获取数据并更新数组，从本机模块我传递一个包含 60 个元素的数组，因为它每 500 m/s 需要 60 个元素（e.values 是数组60 个整数）

...
setData(state => {
    state.splice(0, 60)
    return [...state, ...e.values]
})
...

图表

...
    <LineChart
            style={ { flex: 1 } }
            data={data.map(dt => {
                return dt
            })}
            svg={ {
                strokeWidth: 2,
                stroke: '#2171bf',
            } }
            yMin={-5000}
            yMax={10000}
            numberOfTicks={25}
        >
            <CustomGrid belowChart={true} />
     </LineChart>
...

我尝试了其他图表库，但它们都给出了相同的结果

附：如果语言不完美，请见谅。

【问题讨论】：

标签： android react-native mobile charts react-native-svg-charts

【解决方案1】：

在使用我尝试过的所有基于 SVG 的库在 React Native 中进行绘图时，我一直在努力提高性能。我最近决定尝试在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 的库都高出几个数量级。

【讨论】：