Pie，bar，line：SVG / VML优于Canvas

Question

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

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

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

Answer 1

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

一般情况下，我建议您使用HTML5 Canvas：

• 需要对效果进行像素级控制（例如模糊或blending）
• 有一个非常大量的数据点，这些数据点将被呈现一次（并且可能是平移的），但是否则是静态的

如果您：

使用SVG

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

Answer 2

除非您需要大量操作/动画或者要拥有10,000多张图表，否则不需要画布。有关绩效分析的更多信息here.

区分也很重要：图表和图表是两回事。显示几个条形图与（例如）制作包含10,000个可移动，可链接，可能动画的对象的流程图非常不同。

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

如果它可能让你困惑：RaphaelJS（在我看来最好的图表SVG库）使用了canvas这个词，但这与HTML <canvas>元素无关。

Answer 3

在过去两年中，我倾向于使用svg，因为我主要处理相对较小的数据集来构建馅饼，柱形图或地图。

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