SVG与基于HTML5画布的图表

前端之家收集整理的这篇文章主要介绍了SVG与基于HTML5画布的图表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我必须在浏览器上使用 python后端绘制图表(这在这里可能不重要).有许多图书馆,如JQPlot,D3,Google图表实现这一点.

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

我没有任何以前的图表经验,不想打墙
在我启动项目后.

解决方法

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

>你的DOM树的大小爆炸
>性能问题

使用路径,您可以解决这个问题,但是您将失去交互性.

说你正在建立一个股票图表.如果你正在谈论一个图表,说…最多5年,交易数据样本结束,我认为答案很明显是SVG.如果您正在谈论从交易的第一天开始看沃尔玛的历史数据,或者每分钟做全面的交易信息,那么您将必须仔细查看SVG.可能需要采用喜欢的内存管理和按需获取方法,因为SVG会崩溃,特别是如果您将一个示例转到一个SVG节点.

如果交互性是一个要求,SVG很容易具有优势,给出:

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

当然,你会发现,如果你需要充分的互动性,它可能会违背允许SVG缩放的机制,比如路径崩溃,所以在这里存在固有的紧张局面.

有极端的权衡.如果尺寸小,答案就是SVG动作.如果大小很大,没有交互性,答案是SVG,仅使用路径绘图或使用Canvas.如果大小很大并且需要交互性,你必须去画布或棘手的SVG,这在任何一种情况下都是复杂的.

有些图书馆提供画布和SVG渲染,如ZingChartDojo.其他的只是其中一个选项.

猜你在找的HTML5相关文章