如何解决React Native中的实时数据更新图表
我需要在react native中创建一个图表,该图表每500 m / s从本地模块获取数据(整数数组)并在实时更新中对其进行绘制,为此,我使用了“ react-native-svg”,可以实际更新图表,但性能非常慢且崩溃频繁”。
结果数组最多接受1800个结果,之后图形会滚动
...
const [data,setData] = useState(new Array(1800).fill(0));
...
在监听器中从本地模块获取数据并更新数组,我从本地模块传递了一个包含60个元素的数组,因为每500 m / s需要60个元素(例如,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>
...
我尝试了其他图表库,但它们都给出了相同的结果
P.S。很抱歉,如果语言不是很完美。
解决方法
在使用我尝试过的所有基于 SVG 的库在 React Native 中绘图时,我一直在努力解决性能问题。我最近决定尝试在 WebView
中使用几个基于画布的绘图库,结果非常好。我最终制作了一个简单的包:https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts。
如果你不想使用这个包而是自己做,这很简单。虽然包源代码可能是最好的资源,但我将总结以下步骤:
- 创建一个 HTML 文件并将其导入到您的组件中:
其中 HTML 包含所选图表库的 JavaScript。上面的链接包目前支持 Chart.js v3 和 uPlot。在下面的步骤中,我将展示 Chart.js 配置。const htmlTemplate = require("./index.html");
- 创建一个引用,例如
let webref
。 - 创建一个
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)});`); };
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 的库都要高几个数量级。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。