图表实现基于SVG或Canvas
- Highcharts 基于SVG,方便自己定制,但图表类型有限。
- Echarts 基于Canvas,适用于数据量比较大的情况。
- D3.v3 基于SVG,方便自己定制;D3.v4支持Canvas+SVG,如果计算比较密集,也可以选择用Canvas。
总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。
在 Canvas 中,如果要为细粒度的元素添加事件处理器,必须涉及到边缘检测算法,无疑为开发带来了一定的难度,同时,采用这种方法并不一定精确。相比之下,SVG 是基于 DOM 操作的,支持更精确的用户交互,无疑更适合我们这样一个小规模的团队。
众所周知,频繁的 DOM 操作十分消耗性能。对于用户体验的影响便是可能出现闪烁、卡顿等现象。幸好,伟大的前端界对于这个问题已经有了解决方案: Virtual DOM 技术。
所以我们要做的,就是选择一个支持 Virtual Dom 技术的框架与 D3.js 结合使用。同时,我们的最终目标是将这些图标封装成可复用的组件。
因此,最终我们选择了 facebook 出品的 React 。这是一个相对轻量、简单、专注于 View 的库。
【前端】大数据时代的图表可视化利器——Highcharts,D3和百度的Echarts
图表实现基于SVG或Canvas的更多相关文章
- 基于html5的动画库,非svg和canvas
基于html5的动画库,非svg和canvas https://greensock.com/docs/#/HTML5/GSAP/TweenLite/
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- SVG 与 Canvas:如何选择
SVG 与 Canvas:如何选择 61(共 69)对本文的评价是有帮助 - 评价此主题 本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏 ...
- 前端图形:SVG与Canvas
00.前端图形 前端代码实现图形的几种方式:CSS.SVG.Canvas(主要是JavaScript编码) CSS也是可以画图的,需要借助于高宽.边框border.clip-path裁剪.渐变色背景等 ...
- 三天学会HTML5——SVG和Canvas的使用
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
- 6款基于SVG的HTML5应用和动画
1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
随机推荐
- sql 分组取每组的前n条或每组的n%(百分之n)的数据
sql 分组取每组的前n条或每组的n%(百分之n)的数据 sql keyword: SELECT * ,ROW_NUMBER() OVER(partition by b.UserID order by ...
- Spring MVC : Java模板引擎 Thymeleaf (二)
本文原计划直接介绍Thymeleaf的视图解析,但考虑到学习的方便,决定先构建一个spring-mvc. 以下的全部过程仅仅要一个记事本和JDK就够了. 第一步,使用maven构建一个web app. ...
- C++对象模型——"无继承"情况下的对象构造(第五章)
5.1 "无继承"情况下的对象构造 考虑以下这个程序片段: 1 Point global; 2 3 Point foobar() 4 { 5 Point local; 6 Poin ...
- 小胖说事22-----iOS开发技巧之取消键盘响应和截屏功能
1.UILable内容模糊 在非Retina的iPad mini 的屏幕上,一个UILable的frame的origin值假设是有小数位(如0.5),就会造成显示模糊,所以不妨用整数值的origin. ...
- LeetCode 203. Remove Linked List Elements (移除链表中的项)
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
- 2015南阳CCPC D - Pick The Sticks 背包DP.
D - Pick The Sticks Description The story happened long long ago. One day, Cao Cao made a special or ...
- Prevent the "split brain" by configuring the majority of nodes
## Prevent the "split brain" by configuring the majority of nodes (total number of nodes / ...
- leetcode笔记:Jump Game
一. 题目描写叙述 Given an array of non-negative integers, you are initially positioned at the first index o ...
- JavaScript 中String和int互相转换
在javascript里怎么样才能把int型转换成string型 (1) var num = 0; a = x.toString(); (2) var x = 0; a = x + ...
- null, undefined,"",0,false是什么关系?
null本质上和0,"",false是一类东西,它们都表示一种数据类型的非值.正如0表示数字类型的非值,""表示字符类型的非值一样,null表示完全空的对象,即 ...