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:

• 需要对效果进行像素级控制(例如模糊或混合)
• 有一个非常大量的数据点将被呈现一次(也许是平移),但在其他方面是静态的

如果您使用SVG:

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

Answer 2

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

做出区分也很重要:图表和图表是两回事.显示几个条形图与(例如)制作具有10,000个可移动,可链接,可能动画对象的图表流程图非常不同.

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

如果它可能让你困惑:RaphaelJS(在我看来最好的图表SVG库)使用了canvas这个词,但这与HTML <canvas>元素无关.