• 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的更多相关文章

  1. 基于html5的动画库，非svg和canvas

    基于html5的动画库,非svg和canvas https://greensock.com/docs/#/HTML5/GSAP/TweenLite/

  2. SVG 2D入门13 - svg对决canvas

    到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...

  3. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  4. SVG 与 Canvas：如何选择

    SVG 与 Canvas:如何选择 61(共 69)对本文的评价是有帮助 - 评价此主题   本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏 ...

  5. 前端图形:SVG与Canvas

    00.前端图形 前端代码实现图形的几种方式:CSS.SVG.Canvas(主要是JavaScript编码) CSS也是可以画图的,需要借助于高宽.边框border.clip-path裁剪.渐变色背景等 ...

  6. 三天学会HTML5——SVG和Canvas的使用

    在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...

  7. Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景

    Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...

  8. 6款基于SVG的HTML5应用和动画

    1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...

  9. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

随机推荐

  1. FloatingActionMenu 向上弹出菜单

    本人在github上找到了一个FloatingActionsMenu,精简了其效果(原效果有上下左右四个方向)仅仅保留向上的效果,并做了一定的优化. github上的源代码:地址 ,精简后的源代码地址 ...

  2. 【Cocos2dx游戏开发】Cocos2d-x简介

    一.简介 最近在做一个Android下的卡牌游戏--<九州幻想>开发项目,而我们使用的引擎是Cocos2dx,所以想要写写笔记来记录一下项目中的收获.当然首先稍微介绍一下Cocos2d-x ...

  3. 到底什么是RPC？

    RPC:远程过程调用,是一种同意分布式应用程序调用网络上不同计算机的可用服务的机制.RPC服务会在注冊表中给自己注冊一个UUID,成为通用唯一标识符.这个UUID针对每一项服务都是一个唯一的值,且在全 ...

  4. myeclipse中Servlet出错

    在myeclipse中Servlet总是出错,执行的时候一直提示找不到出现404错误, 然后把代码拷贝到eclipse ee中就没有问题,一直不理解怎么回事. 然后发了好长时间试了好些方法,结果把my ...

  5. Vim 经常使用快捷键及键盘图

    Vim经常使用的快捷键 h - 光标左移一个字符   j - 光标下移一个字符 k - 光标上移一个字符   l - 光标右移一个字符  下移15行 - 15j Ctrl + f - 屏幕向下移动一页 ...

  6. 【Unity 3D】学习笔记三十六：物理引擎——刚体

    物理引擎就是游戏中模拟真是的物理效果.如两个物体发生碰撞,物体自由落体等.在unity中使用的是NVIDIA的physX,它渲染的游戏画面很逼真. 刚体 刚体是一个很很中要的组件. 默认情况下,新创的 ...

  7. Recommendation system

    Dear Prof.Choi: My research interest is mainly the application and optimization of big data and arti ...

  8. 布局技巧2：合并布局（merge标签）

    我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...

  9. 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化，同时对这些虚拟资源进行集中调度和管理

    华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...

  10. Visual Studio AI

    Visual Studio 完全AI手册 - 从0开始配置环境 https://www.cnblogs.com/ms-uap/p/9123033.html 零.前提条件 一台能联网的电脑,使用win1 ...