SVG和HTML5基于Canvas的图表

维维克·贾

我必须使用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. 

我没有任何图表制作经验,也不想在启动项目后碰壁。

摇滚袜子

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

  1. DOM树大小的爆炸式增长

  2. 性能问题

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

假设您正在建立股票图表。如果您谈论的图表最多只能使用5年且仅在交易数据样本的结尾,我认为答案显然是SVG。如果您要谈论的是从交易的第一天开始查看沃尔玛的历史数据或每分钟进行完整的交易信息,那么您将必须非常仔细地查看SVG。由于SVG会分崩离析,特别是如果您将一个样本带到一个SVG节点,则可能必须采用高级内存管理和按需获取方法。

如果需要交互性,则给定以下条件,SVG很容易拥有优势:

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

当然,您会看到,如果需要完全的交互性,则可能会与允许SVG扩展的机制(例如路径崩溃)背道而驰,因此这里存在固有的压力。

在极端情况下将需要权衡。如果尺寸很小,答案是SVG实用。如果尺寸很大且没有交互性,那么答案是仅使用路径绘制或使用Canvas的SVG。如果尺寸很大且需要交互性,则必须使用画布或棘手的SVG,这两种情况都很复杂。

一些库提供画布和SVG渲染,例如ZingChartDojo其他人倾向于只使用两个选项之一。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Javascript和HTML5 Canvas Sprite

来自分类Dev

HTML5 canvas动画和旋转

来自分类Dev

HTML5 canvas动画和旋转

来自分类Dev

mcanvas vs svg vs html5 canvas

来自分类Dev

HTML5 Canvas垂直和水平滚动

来自分类Dev

Three.js和HTML5 Canvas toDataURL

来自分类Dev

html5 canvas和javascript的奇怪行为

来自分类Dev

HTML5 Canvas save()和restore()性能

来自分类Dev

实时预览HTML5 Canvas背景和颜色

来自分类Dev

jQuery基于html5数据属性的显示和隐藏

来自分类Dev

HTML5 canvas javascript

来自分类Dev

HTML5 canvas javascript

来自分类Dev

HTML5 图形 SVG、画布和 CSS

来自分类Dev

基于六边形网格的html5 / canvas游戏框架

来自分类Dev

基于六边形网格的html5 / canvas游戏框架

来自分类Dev

HTML5图表无法呈现

来自分类Dev

带有用于HTML5 Canvas实现的过滤器的SVG

来自分类Dev

为什么HTML5 canvas svg过滤器有损?

来自分类Dev

Safari通过HTML5 Canvas错误地在SVG上绘制阴影

来自分类Dev

如何在 HTML5 Canvas 上使用外部 CSS 绘制 SVG

来自分类Dev

HTML5 Canvas文字交集

来自分类Dev

如何清除canvas html5?

来自分类Dev

HTML5 Canvas游戏渲染图

来自分类Dev

从html5 <canvas>创建视频流

来自分类Dev

HTML5 Canvas drawImage问题

来自分类Dev

HTML5 Canvas-fillRect()与rect()

来自分类Dev

语音气泡html5 canvas js

来自分类Dev

HTML5 Canvas:直接移至点

来自分类Dev

HTML5 canvas hittest任意形状