React Native中的实时数据更新图表 [英] Real-time data update chart in React Native

问题描述

我需要在react native中创建一个图表，该图表每500 m/s从本地模块获取数据(整数数组)并在实时更新中对其进行绘制，为此，我使用了"react-native-svg"，我实际上可以更新图表，但是性能非常慢并且经常发生崩溃.

I need to create a chart in react native that takes data (Array of integer) from a native module every 500 m/s and plots them in live update, to do this I used "react-native-svg", I can actually update the chart but performance is very slow and and crashes are frequent.

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

Array of result accept a maximum of 1800 results, after which the graph scrolls

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

在监听器中从本地模块获取数据并更新数组，我从本地模块传递了一个包含60个元素的数组，因为每500 m/s需要60个元素(例如，values是数组60个整数)

In listener take data from native module and update array, from the native module I pass an array of 60 elements, since it takes 60 elements every 500 m/s (e.values is the array of 60 integers)

...
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>
...

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

I tried other charts libs but they all give the same result

P.S.很抱歉，如果语言不是很完美.

P.S. Sorry if the language is not perfect.

推荐答案

在React Native中使用我尝试过的所有基于SVG的库进行绘图时，我一直在为性能而苦苦挣扎.我最近决定尝试在 WebView 中使用几个基于画布的绘图库，并取得了很好的效果.我最终制作了一个简单的程序包: https://www.npmjs.com/package/@ dpwiese/react-native-canvas-charts .

I've struggled with performance when plotting in React Native with all of the SVG-based libraries I've tried. I recently decided to try using a couple canvas-based plotting libraries within a WebView and had very good results. I ended up making a simple package: https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts.

如果您不想使用此软件包，而是自己动手做，那很简单.虽然程序包源代码可能是最好的资源，但我将总结以下步骤:

Should you not want to use this package and instead do it yourself, it's quite straightforward. While the package source code is probably the best resource I'll summarize the steps below:

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

1. Create an HTML file and import it into your component:

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

HTML包含所选图表库的JavaScript.上面的链接包当前支持 Chart.js v3和

where the HTML contains the JavaScript for the charting library of choice. The linked package above currently supports Chart.js v3 and uPlot. In the steps below I'll show a Chart.js configuration.

Create a ref, for example let webref.

Create a WebView and onLoadEnd you can inject some JavaScript into the WebView that will configure and create your chart

<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，它看起来像:

and config is a valid Chart.js configuration.

To update the chart data simply inject some JavaScript to update the data. In the case of Chart.js here, that'd look like:

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的库都高出几个数量级.

where dataSets are valid Chart.js data sets.

That's it! I've only played around with these two plotting libraries via the https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts package, but so far performance has been really good, even with the JSON stringification of all the passed chart data. I haven't quantified it thoroughly, but both libraries are orders of magnitude more performant than any of the SVG-based ones I've tried.

这篇关于React Native中的实时数据更新图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！