提高高数据速率的图形图表的性能

Question

我想创建包含数千个点的折线图，每秒至少刷新10次。有哪些技术可以提高图表的性能，并显示大量数据？

我的一个想法是将绘制调用的数量从基于数据点的数量更改为基于可用像素的数量。我可以将数据划分为沿X轴的区间，并在每个区间的最小值和最大值之间绘制一条垂直线。

Answer 1

在Visiblox博客here上有一篇关于图表效果图的好文章。

您可能没有在应用程序中使用此特定图表库，但文章的要点仍然适用。这一切都是关于仔细选择你需要展示什么时候。这篇文章的要点是：

• 仔细考虑类型的系列 使用
• 尽可能设置显式范围 轴
• 删除屏幕外的点 DataSeries
• 从UI中删除数据生成 螺纹
• 缩小或停用动画
• 仔细考虑数量 数据和更新频率

MSDN blog上的文章也略显不那么有用，但在提高图表效果时应该有助于概述一些关键领域。

Answer 2

一般来说，你可以做一些事情：

• Delta更新。仅重绘数据已更改的图形位。例如，您可以简单地将图表中的像素转换为左侧，仅绘制新数据而不是重绘整个数据。
• 示例数据。如您所述，您的数据可能非常密集，以至于无法绘制每一个点。根据图表的缩放级别，您可以删除一些数据点。
• 根据设备帧速率而不是数据速率进行重绘。重绘图表的速度比显示速度快，没​​有必要排队另外的重绘（如果已经在进行中）。这样做会阻塞大多数ui所依赖的消息队列并导致口吃ui。

顺便说一下，一个很好的技巧是绘制一个带有一些点的矢量线，这些点将代表图形的分辨率[例如水平像素的数量]，然后你可以让数据“移动”点矢量在队列中，您可以在添加新数据点之前将元素“向左移动”。在Wpf术语中，这将导致“虚拟化”图形，这意味着ui元素是一个常量和动画实例，而不是在新数据进入时重新实现。

相反的例子是在新数据可用时在最后一个点和新点之间添加一个新的矢量线。 （我假设使用高级图形API，其中线条/形状是谨慎的对象，如果没有，'虚拟化'并不适用）

Answer 3

如果您需要在用户操作期间获得良好的性能，则可以执行以下操作：

1. 当用户开始与图表进行交互时，请创建它的简化版本，假设该图表中最多可存在30个数据点。
2. 让用户完成操作

3. 使用所有数据点填充图表（您也可以在此使用采样算法，因为渲染的点多于屏幕分辨率没有意义）

   使用这种方法，你的图表在被操纵时会非常敏感（尽管有较少的详细信息），而在静态时却很详细。

Answer 4

真正需要实际显示的分辨率是高还是仅用于内部计算。你可以在调用绘图函数之前对点进行内部平均/压缩，这样你就可以显示更少的点数。

Answer 5

  

披露：我拥有ABT软件并直接参与SciChart的开发

不幸的是，使用保留模式图形管道的基于WPF的图表无法应对高数据率场景。因此，我创建了一个名为SciChart的高性能WPF / SL图表组件来应对这些场景。 SciChart寻求填补超高性能科学/股票图表的空白，并作为其优化的一部分，它使用专有的重采样算法在绘图前减少数据集。

在回答您的问题时，我建议您查看Nyquist Frequency理论（用于数字信号处理）。这表明精确离散波形所需的最小数据点数是采样频率的2倍。例如，在音频信号的情况下，44kHz的采样频率（对于音频CD）可以准确地表示Fs / 2或22kHz的最大频率。在图表的情况下，奈奎斯特频率是2倍像素宽度 - 这是准确地将频率分离到像素宽度并包括像素宽度所需的最小数据点数。

请注意，这是最低限度，您将体验到aliasing。要解决这个问题，您需要在重采样阶段之前需要antialiasing filter和/或需要更高的倍数。

重采样算法是众所周知的，可以快速实现。我建议重新采样到像素宽度的倍数并应用AA以获得最佳效果。

Answer 6

1. 使用GPU加速。 DirectX，OpenGL，Vulkan，Metal，WebGL。编写用于部分计算的着色器。
2. 然后在不损失质量的情况下优化数据输入，并以最少的函数/方法调用和您执行的操作编写渲染例程，以评估该操作的CPU。对应用程序进行彻底的性能分析。
3. 如果数据速率较低，则对过渡进行动画处理。
4. 如果图表太慢，请降低采样率。 （我们实际上不这样做）。

基于这些原则，我们编写了可监视 80亿个数据点的.NET WPF图表和最多 1亿个数据点的JavaScript图表。我是LightningChart的开发人员之一。