饼图、条形图、线图：SVG/VML 优于 Canvas
我需要选择一个用于“标准”图表的库：饼图、折线图和条形图。
根据我的阅读，在我看来最好的格式是 SVG/VML，例如 Highcharts。现在 IE 9 接受了 SVG，它正在成为所有主要浏览器的标准。重新缩放和导出似乎比 Canvas 更容易。
不过，我发现有几个图表库依赖于 Canvas。我错过了什么吗？对于此类应用程序，是否有理由考虑使用 Canvas 而不是 SVG？
I need to choose a library for "standard" charting: pies, lines and bars.
From what I've read, it seems to me that the best format is SVG/VML, like Highcharts for example. SVG is becoming standard across all major browsers, now that IE 9 accepts it. It seems easier to rescale and export than Canvas.
Still, I see that several charting libraries rely on Canvas. Am I missing something? Is there any reason for considering Canvas over SVG for such applications?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
通常，您可以使用任一方法获得相同的结果。两者最终都会为用户在屏幕上绘制像素。主要区别在于 HTML5 Canvas 为您提供对结果（读取和写入）的像素级控制，而 SVG 是一种保留模式图形 API，可以非常轻松地处理事件或操作使用 JavaScript 或 SMIL 动画进行艺术创作，并为您处理所有重绘工作。
一般来说，如果您满足以下条件，我建议使用 HTML5 Canvas：
如果您
You can generally achieve the same results with either. Both end up drawing pixels to the screen for the user. The major differentiators are that HTML5 Canvas gives you pixel-level control over the results (both reading and writing), while SVG is a retained-mode graphics API that makes it very easy to handle events or manipulate the artwork with JavaScript or SMIL Animation and have all redrawing taken care of for you.
In general, I'd suggest using HTML5 Canvas if you:
Use SVG if you:
除非您需要大量操作/动画或将拥有 10,000 多个图表，否则不需要 Canvas。 此处。
有关性能分析的更多信息 区别：图表和图表是两种不同的东西。显示一些条形图与（例如）使用 10,000 多个可移动、可链接、可能具有动画效果的对象制作图表流程图非常不同。
每个 SVG 元素都是一个 DOM 元素，向 DOM 添加 10,000 或 100,000 个节点会导致令人难以置信的速度减慢。但是向 Canvas 添加如此多的元素是完全可行的，而且速度相当快。
如果它可能让您感到困惑：RaphaelJS（我认为最好的图表 SVG 库）使用了“canvas”一词，但这与 HTML
元素没有任何关系。Canvas isn't needed unless you want heavy manipulation/animation or are going to have 10,000+ charts. More on performance analysis here.
It is also important to make the distinction: Charting and diagramming are two different things. Displaying a few bar charts is very different from (for instance) making diagramming flowcharts with 10,000+ movable, link-able, potentially-animated objects.
Every SVG element is a DOM element, and adding 10,000 or 100,000 nodes to the DOM causes incredible slowdown. But adding that many elements to Canvas is entirely doable, and can be quite fast.
In case it may have confused you: RaphaelJS (in my opinion the best charting SVG Library) makes use of the word canvas, but that is no way related to the HTML
<canvas>element.在过去的两年里，我更喜欢使用 svg，因为我主要处理相对较小的数据集来构建饼图、柱形图或地图。
然而，我发现画布的一个优点是能够将图表保存为图像，这要归功于 toDataURL 方法。我还没有找到 svg 的等效项，似乎保存 svg 图表客户端的最佳方法是首先将其转换为画布（例如使用 canvg)。
In the past two years, my preference has been to use svg, as I mainly deal with relatively small datasets to build pies, column charts or maps.
However one advantage I have found with canvas is the ability to save the chart as an image thanks to the toDataURL method. I haven't found an equivalent for svg, and it seems that the best way to save an svg chart client side is to convert it to canvas first (using for example canvg).