SVG与HTML5基于画布的图表

时间:2015-01-22 07:33:54

标签: svg charts html5-canvas google-visualization jqplot

我必须使用python后端在浏览器上绘制图表(这可能无关紧要)。有许多库,如JQPlot,D3,谷歌图表,以实现这一目标。

但是如果你对它们进行分类,它们要么基于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. 

我之前没有图表经验,也不想碰壁 在我开始这个项目之后。

1 个答案:

答案 0 :(得分:52)

大量数据的项目可能会偏向画布。 SVG方法通常每点创建一个DOM节点(除非你创建路径),这可能导致:

  1. DOM树大小爆炸

  2. 性能问题

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

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

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

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

    当然,您可以看到,如果您需要完整的交互性,它可能会违反允许SVG扩展的机制,例如路径崩溃,因此这里存在内在的紧张。

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

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