LightningChart® JS与其他 JavaScript 图表库的性能比较（一）

LightningChart® JS与其他 JavaScript 图表库的性能比较（二）

LightningChart® JS与其他 JavaScript 图表库的性能比较（三）

最大数据容量

每个解决方案可以可视化多大的数据集？ 分数以所有渠道的数据点数量来衡量。

在下表中，您可以看到其他解决方案数据容量与 LightningChart JS 的比较。

平均而言，LightningChart JS 可以显示比其他数据可视化解决方案大 15570 倍的数据集。

更多信息请参考 https://github.com/Arction/javascript-charts-performance-comparison?tab=readme-ov-file#more-information-about-max-data-capacity-results

LightningChart JS 功能

这些是之前使用 LightningChart JS 记录的最令人印象深刻的壮举。 显然，可实现的结果因硬件而异，因此我们不能声称每个人都可以重现这些结果。 所讨论的结果是用面向软件开发的相对普通的台式计算机记录的。

以交互式折线图形式显示的最大确认数据集：15 亿个数据点

瞬间即可加载并显示千万级海量数据集：0.29秒

LightningChart JS 可以同时显示 400 个通道，每个通道的数据流速率为 1000 Hz，时间窗口为 1 分钟，每帧可见的数据点总计达 2400 万个，并以 60 FPS 的速度更新。

说明

选择测试中包含的解决方案的依据是什么？

我们几乎包含了所有能找到的基于 JavaScript 的数据可视化库:

• 商业和非商业图表库。

• 开源和非开源库。

• 面向实时的硬件加速库。

• 近 10 年的业界宠儿。

• 即使是像Epoch这样的小玩家。

数据加载速度测试“loadTimeSeconds”包含哪些内容？

• 设置渲染框架、许可证以及显示图表所需的所有步骤。

• 启动图表创建和显示图表之间的所有图表处理时间，包括图表方法调用。

• 在显示屏上显示图表之前所需的任何额外等待时间。

有关数据加载速度结果的更多信息

对于每个解决方案和测试的功能，都会执行相同的测试例程。

1.首先，找到解决方案和功能组合开始显示处理过程中明显延迟的近似痛点（数据集大小）。

这是通过从较小的数据集大小开始，然后稳步增加数据集直到 loadTimeSeconds 测量值变得高于 3 秒，但不高于 10 秒来完成的。 测试的数据集大小始终为 [200, 1_000, 10_000, 100_000, 1_000_000, 5_000_000, 10_000_000, 50_000_000, 100_000_000, 150_000_000]。 通道数始终为 10。

2.重复测试 5 次。

3.使用测得的 loadTimeSeconds 分数的中位数作为用于计算数据加载速度分数的最终值。

4.最终分数表明图表库处理和显示数据的速度。 该分数可以在不同图表之间进行线性比较，即使它们使用完全不同的数据集大小。

“-”结果表示基准测试应用程序不支持测试类型、解决方案和测试功能的特定组合。 完整的支持表可以在这里（https://github.com/Arction/javascript-charts-performance-comparison/blob/main/supported.md）找到。

基准测试并不能公平地表明“解决方案 X 加载数据的速度”。 测试是这样进行的：

• 使用立即提供的所有数据创建图表。

• 等待下一个动画帧。

• 使用 Puppeteer 截取整个页面的屏幕截图。

如您所见，截取屏幕截图会带来额外的加载时间，这在正常用例中是不必要的。 但是，这需要确认图表已准备好并且仍然具有响应能力。

这也并不一定意味着图表在物理显示器上可见 - Puppeteer 屏幕截图可以在图表出现在显示器上之前成功完成并正确显示图表。 这似乎给较慢的基于 SVG/Canvas 的图表带来了一些偏颇的优势。

有关流数据性能结果的更多信息

对于每个解决方案和测试的功能，都会执行相同的测试例程。

1.首先，找到解决方案和功能组合开始明显陷入困境的大致痛点（数据集大小）。

这是通过从小数据集大小开始，稳步增加直到 FPS 测量值降至 55 以下来完成的。测试的数据集大小始终为 [200, 1_000, 10_000, 100_000, 1_000_000, 5_000_000, 10_000_000, 50_000_000, 100_000_000, 15 0_000_000 ]。 通道数始终为 10。 流速率设置为每个通道显示数据总数的 1/10。

2.不间断地运行流性能测试 15 秒，测量整个时间内的 FPS。 在测试结束时，考虑显示帧数和测试持续时间，计算用于计算流数据性能分数的 FPS 值。

3.最终分数表示图表可以以滚动更新方式处理多少传入数据（显示新数据，滚出旧数据）。 该值结合了传入数据量以及图表的保持情况 (FPS)。

“-”结果表示基准测试应用程序不支持测试类型、解决方案和测试功能的特定组合。 完整的支持表可以在这里（https://github.com/Arction/javascript-charts-performance-comparison/blob/main/supported.md）找到。

使用 requestAnimationFrame 来计算帧数。 这假设图表不会延迟以某种异步方式显示数据更新。

有关最大数据容量结果的更多信息

对于每个解决方案和测试的功能，都会执行相同的测试例程。

查找图表可以成功加载的最大数据点数量。 如果冻结 30 秒，则测试超时。

这是通过从较小的数据集大小开始，然后稳步增加数据集直到图表无法再执行测试来完成的。 测试的数据集大小始终为 [200, 1_000, 10_000, 100_000, 1_000_000, 5_000_000, 10_000_000, 50_000_000, 100_000_000, 150_000_000]。 通道数始终为 10。

“-”结果表示基准测试应用程序不支持测试类型、解决方案和测试功能的特定组合。 完整的支持表可以在这里（https://github.com/Arction/javascript-charts-performance-comparison/blob/main/supported.md）找到。

可视化错误

此处（https://github.com/Arction/javascript-charts-performance-comparison?tab=readme-ov-file）列出了测试期间遇到的所有可视化错误

复制性能测试结果

所有基准测试代码都是开源的，可以在该存储库的 bench 文件夹下找到。

您可以使用命令 npm i 和 npm start 运行测试

可以通过编辑 bench/index.js 配置变量来配置测试。

• 结果因硬件而异。 它们只能在使用一台相同设备进行的测量之间进行比较。
  

• 虽然测试测量结果是自动记录的，但每次测试运行都必须手动验证

如果图表崩溃或未完全显示，则测量无效。

LightningChart® JS与其他 JavaScript 图表库的性能比较（一）

LightningChart® JS与其他 JavaScript 图表库的性能比较（二）

LightningChart® JS与其他 JavaScript 图表库的性能比较（三）