SVG与HTML5基于画布的图表

Question

我必须使用python后端在浏览器上绘制图表(这可能无关紧要).为实现这一目标,有许多图书馆,如JQPlot,D3,Google Charts.

但是如果你对它们进行分类,它们要么基于HTML5 Canvas,要么基于SVG.两者都是他们自己领域的重要技术.但

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches. 

我没有任何绘图经验,也不想在我启动项目后碰壁.

Answer 1

具有大量数据的项目可能有利于画布.SVG方法通常每点创建一个DOM节点(除非您创建路径),这可能导致:

1. DOM树大小爆炸

2. 性能问题

使用路径,您可以解决此问题,但之后您将失去交互性.

假设您正在构建股票图表.如果你正在谈论一个图表,比如...最多5年和交易数据样本结束,我认为答案显然是SVG.如果您正在谈论从交易的第一天开始查看沃尔玛的历史数据或每分钟进行全面交易信息,您将不得不真正仔细查看SVG.可能必须使用花哨的内存管理和按需获取方法,因为SVG将崩溃,特别是如果你将一个样本转移到一个SVG节点.

如果需要交互性,SVG很容易获得优势:

• 它是一种保留模式API
• 您可以使用典型的事件处理程序
• 您可以轻松添加/删除节点等.

当然,你会发现如果你需要完全的交互性,它可能会违反允许SVG扩展的机制,比如路径崩溃,所以这里存在固有的张力.

在极端情况下会有一个权衡取舍.如果尺寸很小,答案是SVG动手.如果大小很大并且没有交互性,答案是仅使用路径绘制或使用Canvas的SVG.如果大小很大并且需要交互性,则必须使用canvas或棘手的SVG,这在任何一种情况下都很复杂.

有些库提供了canvas和SVG渲染,例如ZingChart和Dojo.其他人倾向于坚持两种选择中的一种.