11

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

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

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

4

3 回答 3

8

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

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

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

如果您满足以下条件,请使用 SVG:

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

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

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

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

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

于 2011-05-09T12:46:52.573 回答
0

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

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

于 2013-09-28T16:09:00.450 回答