饼图、条形图、线条图:SVG/VML 优于画布

Pie, bar, line: SVG/VML better than Canvas

本文关键字：VML 于画布 SVG 条形图 饼图      更新时间：2023-09-26

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

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

尽管如此，我还是看到一些图表库依赖于 Canvas。我错过了什么吗？是否有任何理由考虑将 Canvas 而不是 SVG 用于此类应用程序？

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

一般来说，我建议使用HTML5 Canvas，如果你：

  • 需要对效果进行像素级控制（例如模糊或混合）
  • 具有大量数据点，这些数据点将呈现一次（并且可能平移），但在其他方面是静态的

在以下情况下使用 SVG：

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

Canvas 不是必需的，除非你想要大量的操作/动画或将有 10,000+ 图表。有关性能分析的更多信息，请单击此处。

区分也很重要：图表和图表是两个不同的东西。显示一些条形图与（例如）使用10,000+可移动，可链接，潜在动画对象制作图表流程图有很大不同。

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

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

在过去的两年里，我更喜欢使用 svg，因为我主要处理相对较小的数据集来构建饼图、柱形图或地图。

但是，我发现画布的一个优点是能够将图表另存为图像，这要归功于toDataURL方法。我还没有找到 svg 的等效项，似乎保存 svg 图表客户端的最佳方法是先将其转换为画布（例如使用 canvg）。

相关文章：