Canvas VS SVG 在单个页面上显示 600 多个折线图答案

【问题标题】：Canvas VS SVG for more than 600 Line Charts on a Single pageCanvas VS SVG 在单个页面上显示 600 多个折线图
【发布时间】：2013-12-20 11:00:09
【问题描述】：

如果有专家提供帮助，我将不胜感激。

我正在尝试创建一个包含总共 625 个单元格的表格（25 x 25）的单个页面。每个表格单元格应包含一个包含 120 个数据点的简单折线图。

每个折线图都应该能够放大/缩小和平移。

性能是关键问题。我应该使用什么技术？ 625 画布或 SVG 元素？

感谢任何想法。

【问题讨论】：

单张画布应该没问题...
根据每个图表的分辨率，如果您需要适应不同的设备，那么您可能需要查看Time series compression for adaptive chart generation 以了解有关压缩的一些想法。该论文的副本由University of British Columbia 托管
@Ken，问题是表格中的每个单元格都需要交互，它们需要被选中。我确实需要为每个折线图单独设置多个元素。
@Chris，谢谢你的好论文。就我而言，#of 个数据点将固定为 120 个数据点。
25x25 网格中的 120 个数据点是 75,000 个数据项

标签： canvas svg d3.js

【解决方案1】：

如果您只需要缩放和平移每个表格的图表，canvas 可能会有更好的性能。如果你使用 SVG，你可以使用d3.svg.axis 生成器，如果你使用画布，你可能需要自己编写。使用 SVG，您还可以在创建线条后对其进行修改，甚至使用 CSS 对其进行自定义。Canvas 并不总是比 SVG 快，它取决于应用程序和目标平台。快速的概念证明可以帮助您做出决定。

【讨论】：