我需要为“标准”图表选择一个库:饼图、线条和条形图。
根据我的阅读,在我看来最好的格式是 SVG/VML,例如 Highcharts。SVG 正在成为所有主要浏览器的标准,现在 IE 9 接受了它。它似乎比 Canvas 更容易重新缩放和导出。
不过,我看到几个图表库依赖于 Canvas。我错过了什么吗?是否有任何理由为此类应用考虑 Canvas over SVG?
我需要为“标准”图表选择一个库:饼图、线条和条形图。
根据我的阅读,在我看来最好的格式是 SVG/VML,例如 Highcharts。SVG 正在成为所有主要浏览器的标准,现在 IE 9 接受了它。它似乎比 Canvas 更容易重新缩放和导出。
不过,我看到几个图表库依赖于 Canvas。我错过了什么吗?是否有任何理由为此类应用考虑 Canvas over SVG?
您通常可以使用其中任何一个来获得相同的结果。两者最终都会为用户在屏幕上绘制像素。主要区别在于 HTML5 Canvas 为您提供了对结果的像素级控制(读取和写入),而 SVG 是一种保留模式图形 API,可以非常轻松地处理事件或使用 JavaScript 或 SMIL 动画和操作艺术品已为您处理所有重绘。
一般来说,如果您有以下情况,我建议您使用 HTML5 Canvas:
如果您满足以下条件,请使用 SVG:
除非您想要繁重的操作/动画或将拥有 10,000 多个图表,否则不需要画布。更多关于性能分析的信息。
区分也很重要:图表和图表是两个不同的东西。显示一些条形图与(例如)制作带有 10,000 多个可移动、可链接、潜在动画对象的图表流程图非常不同。
每个 SVG 元素都是一个 DOM 元素,向 DOM 添加 10,000 或 100,000 个节点会导致令人难以置信的减速。但是将这么多元素添加到 Canvas 是完全可行的,而且速度非常快。
万一它可能让你感到困惑:RaphaelJS(我认为最好的图表 SVG 库)使用了 canvas 这个词,但这与 HTML<canvas>
元素没有任何关系。