android - 在 React Native 上无延迟地渲染许多图表
问题描述
我需要向用户提要显示每个项目都包含图表的项目。现在我使用 react-native-svg-charts:
<LineChart
style={{ height: 150, position: 'relative', left: -20 }}
data={data}
curve={shape.curveNatural}
svg={{ stroke: chartColor1, strokeWidth: 5 }}
contentInset={{ top: 20, bottom: 20 }}
showGrid={false}
numberOfTicks={0}
key={props.id}
>
但是当我加载超过 50 个项目时,应用程序的性能下降到 10-15 fps。
我认为这是因为页面上有许多 SVG。您认为我应该使用哪种解决方案来避免这种情况?
解决方案
我最近在这里回答了一个类似的问题:React Native 中的实时数据更新图表,并会在这里提出相同的建议。
在使用我尝试过的所有基于 SVG 的库在 React Native 中进行绘图时,我一直在为性能而苦苦挣扎。我最近决定尝试在 a 中使用几个基于画布的绘图库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");
- 创建一个 ref,例如
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 的库都高出几个数量级。
推荐阅读
- python - 在 Salt 中打开 Jinja2 扩展
- python - 将numpy列表转换为列向量
- python - 使用python在excel中逐行转置
- python - 在 python 3 中为 asyncio.subprocess.communicate() 添加超时函数时出现异常忽略错误
- android - 如何解决 Android Studio 上的 e libc 错误?
- azure - 如何自定义逻辑应用的共享访问签名?
- r - R googleway:更改标记颜色
- c++ - 为什么 system() 在 win7 上总是返回 127?
- python - 使用生成器从文件中产生行,但在到达 StopIteration 时继续等待
- php - 使用多态数据生成统计数据