问题 Pie,bar,line:SVG / VML优于Canvas


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

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

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


7826
2018-05-09 11:51


起源

您的主题中包含“更好”一词,这是一个明确的指标,表明您有望成为一个主观问题。更糟糕的是,您实际上没有指定衡量“更好”的标准。大多数浏览器都可以访问?大多数用户都可以访问?最快得到类似的结果?使用的内存最少?最简单的脚本交互?搜索引擎可以抓取哪些数据? - Phrogz
我希望我首先知道标准......例如搜索引擎是一个我甚至没想过的好的搜索引擎。 - Christophe


答案:


通常,您可以获得相同的结果。两者最终都为用户绘制了屏幕像素。主要区别在于HTML5 Canvas可以对结果(包括读取和写入)进行像素级控制,而SVG则是 保留模式图形API 这样可以很容易地处理事件或使用JavaScript或SMIL动画操作图稿,并为您重新绘制所有重绘图。

一般来说,如果您:我建议使用HTML5 Canvas:

  • 需要对效果进行像素级控制(例如模糊或 混纺
  • 有一个非常大量的数据点将被呈现一次(并且可能被淘汰),但在其他方面是静态的

如果您使用SVG:

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

8
2018-05-09 21:28





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

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

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

如果它可能让你感到困惑:RaphaelJS(在我看来最好的图表SVG库)使用了canvas这个词,但这与HTML没有任何关系 <canvas> 元件。


5
2018-05-09 12:46





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

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


0
2017-09-28 16:09