SVG 与基于 HTML5 Canvas 的图表

Question

我必须使用 python 后端在浏览器上绘制图表(这在这里可能并不重要)。有许多库可以实现此目的，例如 JQPlot、D3、Google Charts。

但是如果你对它们进行分类，它们要么是基于 HTML5 Canvas 的，要么是基于 SVG 的。两者都是各自领域的重要技术。但是

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches. 

我之前没有任何制图经验，也不想碰壁在我开始项目之后。

Answer 1

具有大量数据的项目可能更喜欢 Canvas 。 SVG 方法通常为每个点创建一个 DOM 节点(除非您创建路径)，这可能会导致:

1. DOM 树的大小呈爆炸式增长

2. 性能问题

使用路径，您可以解决这个问题，但随后您就会失去交互性。

假设您正在构建股票图表。如果您谈论的是一张图表，比如说……最多 5 年且仅包含交易结束数据样本，我认为答案显然是 SVG。如果您要查看沃尔玛从交易第一天起的历史数据或每分钟查看完整的交易信息，您将必须仔细查看 SVG。可能必须采用奇特的内存管理和一种按需获取的方法，因为 SVG 将崩溃，特别是如果您将一个样本发送到一个 SVG 节点。

如果需要交互性，SVG 很容易具有优势，因为:

• 这是一个保留模式 API
• 您可以使用典型的事件处理程序
• 您可以轻松添加/删除节点等。

当然，您会看到，如果您需要完全交互性，它可能会违背允许 SVG 缩放的机制，例如路径折叠，因此这里存在固有的张力。

将会有一个极端的权衡。如果尺寸很小，答案就是 SVG。如果尺寸很大并且没有交互性，答案是仅使用路径绘制的 SVG 或使用 Canvas。如果尺寸很大并且需要交互性，则必须使用 Canvas 或棘手的 SVG，这两种情况都很复杂。

一些库同时提供 Canvas 和 SVG 渲染，例如 ZingChart和 Dojo 。其他人倾向于只坚持这两个选项之一。