SVG 与 HTML5 Canvas 基于图表

Question

我必须使用 python 后端在浏览器上绘制图表（这在这里可能无关紧要）。有很多库，如 JQPlot、D3、Google Charts 可以实现这一点。

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

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 节点（除非您创建路径），这可能导致：

你的 DOM 树的大小爆炸
性能问题

使用路径可以绕过这个问题，但会失去交互性。

假设您正在构建股票图表。如果您谈论的是图表，比如...最多 5 年且仅交易结束数据样本，我认为答案显然是 SVG。如果你谈论的是从交易的第一天开始查看沃尔玛的历史数据或每分钟做完整的交易信息，你将不得不真正仔细地查看 SVG。可能必须采用花哨的内存管理和一种按需获取的方法，因为 SVG 会分崩离析，尤其是当您将一个样本发送到一个 SVG 节点时。

如果交互性是一项要求，SVG 很容易占据优势，给定：

是保留模式API
您可以使用典型的事件处理程序
你可以add/remove节点轻松等

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

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

有些库同时提供 canvas 和 SVG 渲染，例如 ZingChart and Dojo。其他人倾向于只坚持两种选择中的一种。

Answer 2

由于基于矢量，SVG 可以免费为您提供可扩展性，其副作用是它在高分辨率显示器上很清晰，在打印时也很清晰。您可以通过 canvas 以 2 倍分辨率渲染并缩放 canvas 来解决这个问题，但这只是一个半解决方案。

我认为 SVG 是现代方式，也是向前推进的方式。

如果您在有很多节点的情况下担心渲染速度，还请考虑如果您使用 canvas，您基本上是在使用自己的基于 Javascript 的渲染代码，它必须渲染那些相同的节点。您确实获得了只需渲染一次的可预测性，但如果您只渲染一次，那也意味着您失去了在缩放或执行各种交互操作时重新渲染的能力。如果性能是一个问题，您可以通过对数据进行子采样、取移动平均值并每 x 行仅绘制一次等来简化 SVG，具体取决于您在做什么。但是，我们谈论的是成千上万个几乎没有影响的节点。

Canvas 如果您要构建基于 Web 的光栅图形编辑器或本质上基于光栅的东西，那么

Canvas 仍然占有一席之地，但本质上，如果我们正在查看图表，我们谈论的是本质上是矢量的东西基于.

SVG 与 HTML5 Canvas 基于图表

SVG vs HTML5 Canvas Based Charts

charts

svg

google-visualization

jqplot

html5-canvas