Web数据可视化

Echart,D3方向

Created by Nelson Kuang 2018.08.17

风格设置

None - Fade - Slide - Convex - Concave - Zoom

主题选择

Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

什么是数据可视化

前端方向的数据可视化大部分是指借助 曲线图表等展示形式把一些相关数据更直接、形象、生动、具体的展示在web页面上

数据可视化基础

要学习Web数据可视化要了解的一些基础概念

  • 图表的类型
  • 组成图表的基本元素

图表的类型

散点图, 线状图, 面积图, 柱状图, 饼状图/环形图 , 组合线状/组合柱状图, 堆栈图, Gauge仪表盘图, 标签云图, 打包图, 弦图, 雷达图, 力向导图, 树状图, 漏斗图(Funnel), 热力图, K线图, geomap地图...

组成图表的基本元素

X轴(xAxis), Y轴(yAxis), 系列列表(series), 图例(legend) , 标题(title), 网格(grid), 极坐标系(polar), 径向轴(radiusAxis), 角度轴(angleAxis), 区域缩放(zoom), tooltip(提示框), toolbox(工具栏), 区域选择刷子(brush)...

Echarts

没搞过数据可视化?
不懂Canvas?
不懂SVG?
根本不是问题。
只要你有javascript基础,
这里有你想要的一切。她就是:
ECHARTS

5 分钟上手 ECharts

  • 获取 ECharts
  • 引入 ECharts
  • 绘制一个简单的图表
  • 这样你的第一个图表就诞生了!

获取 ECharts

  • 官网 下载或者按需打包
  • ECharts 的 GitHub 上下载
  • npm 获取 echarts
    npm install echarts --save
  • cdn 引入,你可以在 cdnjsnpmcdn 或者国内的 bootcdn

引入 ECharts


							
							

绘制一个简单的图表


    
    

这样你的第一个图表就诞生了!

D3.js

Echarts满足不了?
BOSS说要云标签图?
BOSS说要各种自定义?
根本不是问题。
只要你有时间折腾,
只要你有jQuery基础,
只要你有SVG基础,
这里有你想要的一切。她就是"SVG界的jQuery":
D3.js

D3.js从入门到“放弃”指南

  • 学习好SVG矢量图
  • 理解D3给Dom节点绑定数据时的Update、Enter和Exit模式
  • 绘制一个简单的图表
  • 各种想象不到的API

学习好SVG矢量图

SVG适量图是必须的,为什么要学习SVG图呢?因为D3.js堪称SVG中的jQuery,稍稍熟悉点jQuery的话,会更容易上手D3,当然你如果想用D3输出Canvas图或者你牛逼哄哄的说老子就只用D3来玩Canvas怎么嘀也可以,但SVG图操作起来更加灵活,更加方便调试,在Chrome中调试SVG图更加直观。D3只是一个作图工具,你完全也可以手写SVG的XML代码来完成作图...
去学习SVG吧...

D3的Update、Enter和Exit模式


								// Update…
								var p4 = d3.select("#my_p_4")
									.selectAll("p") // 选择所有的P元素
									.data([4, 8, 15, 16, 23, 40]) // 给所有的P元素相应绑定数据(当然P元素有可能与数组元素个数不相等,则要转入下面的Enter和exit操作)
									.text(function (d) { return d; }); // 改变所有的P元素的text为相应的数组的值
								
								p4.enter().append("p") // 如果原有P节点元素小于数组的元素个数,则要给父节点append节点补足
										.text(function (d) { return d; });
								
								// Exit…
								p4.exit().remove(); // 如果原有P节点元素大于数组的元素个数,则要执行删除操作,以保证p节点元素个数与传入的data数组元素个数相当
								

绘制一个简单的图表

简单? 在D3的世界里没有“ 简单”两字

Talk is cheap, just show me the code!

简单柱状图源码

简单柱状图Demo

各种想象不到的API

点我直达API, 慢慢爬坑ing...

Echarts Demo

http://echarts.baidu.com/examples/

D3 Demo

https://github.com/d3/d3/wiki/Gallery

https://bl.ocks.org/mbostock

THE END

- Get Started with Echarts
- Dive into D3.js