我需要为“标准”图表选择一个库:馅饼,线条和条形图。
根据我的阅读,在我看来,最好的格式是SVG / VML,例如Highcharts。现在,IE 9已经成为所有主流浏览器的标准配置。重新缩放和导出似乎比Canvas更容易。
不过,我看到几个图表库依赖于Canvas。我错过了什么吗?是否有任何理由考虑使用Canvas over SVG进行此类应用?
我需要为“标准”图表选择一个库:馅饼,线条和条形图。
根据我的阅读,在我看来,最好的格式是SVG / VML,例如Highcharts。现在,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>
元件。
在过去两年中,我倾向于使用svg,因为我主要处理相对较小的数据集来构建馅饼,柱形图或地图。
然而,我在canvas中找到的一个优点是能够将图表保存为图像,这要归功于 toDataURL 方法。我没有找到svg的等价物,似乎保存svg图表客户端的最佳方法是首先将其转换为画布(例如使用 canvg)。