问React本机的实时数据更新图表
EN

Stack Overflow用户

提问于 2020-08-28 23:21:10

回答 1查看 1.5K关注 0票数 0

我需要在react本机中创建一个图表，它每隔500米/秒从一个本地模块获取数据(数组整数)，并在实时更新中绘制它们，为此我使用了“react本机-svg”，我实际上可以更新图表，但是性能非常慢，并且经常发生崩溃。

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

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

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

我试过其他图表库，但结果都一样。

抱歉，如果语言不完美的话。

react-native-svg-charts

android

react-native

mobile

charts

回答 1

Stack Overflow用户

发布于 2021-02-14 18:15:27

在使用我尝试过的所有基于SVG的库Reactive原住民时，我一直在努力提高性能。最近，我决定尝试在WebView中使用几个基于画布的绘图库，并取得了很好的效果。最后，我做了一个简单的包：https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts。

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

创建一个HTML文件并将其导入您的组件: const = htmlTemplate (“./index.html”)；其中，HTML包含可供选择的图表库的JavaScript。上面的链接包目前支持Chart.js、v3和uPlot。在下面的步骤中，我将展示一个Chart.js配置。
创建一个参考文件，例如let webref。
创建一个WebView和onLoadEnd，您可以将一些JavaScript注入到WebView中，以配置和创建图表 (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的库都要好。