javascript - 饼图、条形图、线条图：SVG/VML 优于 Canvas

Question

我需要为“标准”图表选择一个库：饼图、线条和条形图。

根据我的阅读，在我看来最好的格式是 SVG/VML，例如 Highcharts。SVG 正在成为所有主要浏览器的标准，现在 IE 9 接受了它。它似乎比 Canvas 更容易重新缩放和导出。

不过，我看到几个图表库依赖于 Canvas。我错过了什么吗？是否有任何理由为此类应用考虑 Canvas over SVG？

Answer 1

您通常可以使用其中任何一个来获得相同的结果。两者最终都会为用户在屏幕上绘制像素。主要区别在于 HTML5 Canvas 为您提供了对结果的像素级控制（读取和写入），而 SVG 是一种保留模式图形 API，可以非常轻松地处理事件或使用 JavaScript 或 SMIL 动画和操作艺术品已为您处理所有重绘。

一般来说，如果您有以下情况，我建议您使用 HTML5 Canvas：

• 需要对效果进行像素级控制（例如模糊或混合）
• 有大量数据点将显示一次（可能会被平移），但在其他方面是静态的

如果您满足以下条件，请使用 SVG：

• 希望在屏幕上绘制的复杂对象与事件相关联（例如，在数据点上移动以查看工具提示）
• 希望结果以高分辨率打印
• 需要独立地为各个图形部分的形状制作动画
• 将在您的输出中包含您希望被搜索引擎索引的文本
• 想要使用 XML 和/或 XSLT 来生成输出

Answer 2

除非您想要繁重的操作/动画或将拥有 10,000 多个图表，否则不需要画布。更多关于性能分析的信息。

区分也很重要：图表和图表是两个不同的东西。显示一些条形图与（例如）制作带有 10,000 多个可移动、可链接、潜在动画对象的图表流程图非常不同。

每个 SVG 元素都是一个 DOM 元素，向 DOM 添加 10,000 或 100,000 个节点会导致令人难以置信的减速。但是将这么多元素添加到 Canvas 是完全可行的，而且速度非常快。

万一它可能让你感到困惑：RaphaelJS（我认为最好的图表 SVG 库）使用了 canvas 这个词，但这与 HTML<canvas>元素没有任何关系。

Answer 3

在过去的两年里，我的偏好一直是使用 svg，因为我主要处理相对较小的数据集来构建饼图、柱形图或地图。

然而，我发现画布的一个优点是能够将图表保存为图像，这要归功于toDataURL方法。我还没有找到 svg 的等价物，似乎保存 svg 图表客户端的最佳方法是先将其转换为画布（例如使用canvg）。