javascript - 折线图性能

Question

我正在尝试使用 LightningChart JS 为我的折线图获得最佳性能。从性能示例中，我了解到我可以使用性能测试仪运行的最大点数是10 个系列 x 100 万个点。我这样配置它 。

我可以以 30-40 次/秒的刷新率运行它。 两个问题：

1. 有没有一种简单的方法可以用更高的点数来测试它？有任何在线演示/测试器吗？
2. 是否有使用此 JavaScript 闪电图表优化性能设置的一般准则？

Answer 1

多点测试

目前没有任何在线测试仪具有比这更高的点数。但是您使用的测试器的源代码可以在 GitHub 中找到：https ://github.com/Arction/lcjs-performance-tester 该存储库有很好的说明如何在本地运行它。

要添加具有更多点的测试，您可以编辑content/src/tests/default.js文件并添加具有您想要测试的点数的新测试。假设您想要 10 个系列，每个系列有 200 万点。你可以添加

{
    key: '2M',
    label: '2 M points',
    code: (thickness) => ScrollingProgressiveLine(2 * 1000 * 1000, seriesCount, thickness.thickness, `${seriesCount} Scrolling Line Series 2 000 000 points each ${thickness.label}`),
    defaultSelected: false
},

在第 718 行之后，在 1M 和 10M 点测试之间。该列表中的最后一个测试被排除在实际可运行测试之外。

还有一个展示示例，可用于查看图表在保持 60 fps 的同时可以显示多少点。https://arction.github.io/lcjs-showcase-streamingData/

优化性能

1. 根据您在创建新系列时使用的数据 设置DataPattern 。
   • 对于线系列，它使用dataPattern线系列选项中的属性进行设置。chart.addLineSeries({dataPattern: DataPatterns.horizontalProgressive})
2. 禁用动画。
   • 我已经在如何禁用 LightningChart JS 中的图表动画中回答了如何禁用动画？.
3. 禁用鼠标交互。
   • 要禁用鼠标交互，您可以在所有轴、系列和图表上调用.setMouseInteractions(false) 。
4. 禁用自动光标。
   • 为此，请使用AutoCursorModes.disabled作为参数调用setAutoCursorMode 。