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

Question

我需要在react native中创建一个图表，该图表每500米/秒从一个native模块获取数据(整数数组(，并在实时更新中绘制它们，为此我使用了"反应天然svg"；，我实际上可以更新图表，但的性能非常慢，崩溃也很频繁。

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

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

在监听器中，从本机模块和更新数组中获取数据，从本程序模块中，我传递一个由60个元素组成的数组，因为它每500米/秒需要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>
...

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

附言：如果语言不完美，很抱歉。

Answer 1

在React Native中使用我尝试过的所有基于SVG的库进行绘图时，我一直在为性能而挣扎。我最近决定尝试在WebView中使用几个基于画布的绘图库，结果非常好。我最终做了一个简单的包裹：https://www.npmjs.com/package/@dpwiese/rect原生画布图表。

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

1. 创建一个HTML文件并将其导入到组件中：

   const htmlTemplate = require("./index.html");
   

   其中HTML包含所选图表库的JavaScript。上面的链接包目前支持Chart.js v3和uPlot。在下面的步骤中，我将展示Chart.js配置
2. 创建一个引用，例如let webref
3. 创建一个WebView和onLoadEnd，您可以在WebView中注入一些JavaScript来配置和创建图表

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

   并且CCD_ 7是有效的Chart.js配置
4. 要更新图表数据，只需注入一些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数据集
5. 就是这样！我只是通过https://www.npmjs.com/package/@dpwiese/rect原生canvas charts包，但到目前为止，即使对所有传递的图表数据进行了JSON字符串化，性能也非常好。我还没有完全量化它，但这两个库的性能都比我尝试过的任何一个基于SVG的库高出几个数量级