我需要在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 中使用几个基于画布的绘图库,并取得了很好的效果.我最终制作了一个简单的程序包: www.npmjs/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: www.npmjs/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:
HTML包含所选图表库的JavaScript.上面的链接包当前支持 Chart.js v3和 uPlot .在下面的步骤中,我将显示Chart.js配置.
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.
其中 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配置.
and config is a valid Chart.js configuration.
其中 dataSets 是有效的Chart.js数据集.
where dataSets are valid Chart.js data sets.
更多推荐
React Native中的实时数据更新图表
发布评论