蚂蚁金服新一代数据可视化引擎 G2

大数据

作者:阁主乄

新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如D3、Highcharts、ECharts、Chart等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库。
官方地址    Github

2016年发布的开源库,时间虽短但库功能齐全,唯一不足的是社区太少,对于我这类菜鸟来说是件非常难过的事情,没办法硬着头皮终于找到思路……项目完成之际写篇 G2 的相关功能的用法,帮助更多使用 G2 的朋友快速上手。

首先和大多数图形库一样G2的dom结构是由canvas组成的。

大数据

为了更好得使用 G2 进行数据可视化,我们也和其他图形库一样,需要先了解图表的组成以及相关概念,完整的 G2 图表组成如下:

大数据

接下来各个组合的相关概念我将复制官网的:

坐标轴 axis

通常包含两个坐标轴,在笛卡尔坐标系下,分别为 x 轴和 y 轴,在极坐标轴下,则分别由角度和半径2个维度构成。 每个坐标轴由坐标轴线、刻度线、刻度文本、标题以及网格线组成。

图例 legend

图例作为图表的辅助元素,用于标定不同的数据类型以及数据的范围,用于辅助阅读图表,帮助用户在图表中进行数据的筛选过滤。

几何标记 geom

几何标记,即我们所说的点、线、面这些几何图形,在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现,不同的几何标都对应自己能识别的图形属性。

G2 的核心既是将数据从数据空间转换到图形空间。

提示信息 tooltip

当鼠标悬停在某个点上时,会以框的形式显示当前点对应的数据的信息,比如该点的值,数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

辅助标记 guide

当需要在图表上绘制一些辅助线、辅助框或者图片时,比如增加平均值线、最高值线或者标示明显的范围区域时,可以使用辅助标记 guide。

接着如上所述G2的dom结构也是canvas,看图了解到其实它是由三层 canvas 构成的,这三层 canvas 分别对应 chart 对象的如下三个属性:

frontCanvas 最上层 canvas,图例 legend、提示信息 tooltip、和 text tag html 这三种类型的辅助标记 guide 在这一层绘制;

canvas 中间层,绘制图表的主体内容几何标记 geom;

backCanvas 最下层 canvas,坐标轴 axis 和 line image rect arc 这四种类型的辅助标记 guide 在这一层绘制。

了解完相关知识,现在就开始创建图形吧。需要先引入G2的JS文件:

引入后先看看如何简单的创建一个折线图,代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单线图</title> <script src="http://www.36dsj.com/archives/83222/https:/a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script> <script src="http://www.36dsj.com/archives/83222/https:/a.alipayobjects.com/g/datavis/g2/2.3.1/g2.js"></script> </head> <body> <div></div> <script> var data = [ {"time": "2017-1","name": "中国","data": 43}, {"time": "2017-2","name": "中国","data": 477}, {"time": "2017-3","name": "中国","data": 403}, {"time": "2017-4","name": "中国","data": 243}, {"time": "2017-5","name": "中国","data": 343}, {"time": "2017-6","name": "中国","data": 743}, {"time": "2017-7","name": "中国","data": 543}, {"time": "2017-8","name": "中国","data": 643}, {"time": "2017-9","name": "中国","data": 443}, {"time": "2017-10","name": "中国","data": 243}, {"time": "2017-11","name": "中国","data": 143}, {"time": "2017-12","name": "中国","data": 243}, ]; var chart = new G2.Chart({ id: 'c1', forceFit: true, height: 450 }); chart.source(data, { time: { alias: '月份', range: [0, 1] }, temperature: { alias: '平均温度(°C)' } }); chart.line().position('time*data').color('name').size(2); chart.render(); </script> </body> </html>

大数据

行,接下来我们开始一步步分析了解创建图形的代码分别是什么意思,分析完最后我还会列出几个可能开发中会用到的需求方法。

用户喜欢...

大数据和云计算的冲突

最近,IT行业专家在参加相关会议时发现了一个隐藏的主题,那就是虽然很多人将关注的重点转移到基于云计算的架构...


智能家居为何需要大数据, 大数据在智能家居领域的贡献是什么?

大数据分为大数据存储和大数据分析,属于两种截然不同的计算机技术领域,大数据存储用于大数据分析。大数据存储重点在于研发可以扩展至PB甚至EB级别的数据存储平台;大数据分析关注在...


陆金所计葵生:深度解析大数据和AI对未来金融影响

陆金所联席董事长兼CEO计葵生在北京大学数字金融研究中心「数字金融的中国时代」第二届年会上发表主题演讲,深...


大数据时代:十大最热门的大数据技术

随着大数据分析市场快速渗透到各行各业,哪些大数据技术是刚需?哪些技术有极大的潜在价值?根据弗雷斯特研究公司发布的指数,这里给出最热的十个大数据技术。 1、预测分析 预测分析是...


乐橙视频云锁闪耀发布,让家与你不再有距离

大华乐橙在深圳会展中心召开了2017 “锁定天下”乐橙智能锁新品发布会,重磅发布了乐橙首款视频云锁。本次发布会...


Nutanix通过Cloudera Enterprise认证,携手打造精简大数据企业云

企业云计算领导者Nutanix今日在2017 .NEXT用户大会(北京站)上宣布,其企业云平台软件已通过Cloudera技术认证计划(...


超过300亿美元的工业级无人机市场将呈爆发式增长, 上海无人机展会引领行业发展

当消费级无人机市场已成为一片红海之际,各大无人机厂商都在工业级无人机领域发力以争夺高端行业应用的市场,...


浪潮智能存储G2中标华中科大脑科学研究项目 金额逾千万

日前,浪潮存储成功中标华中科技大学苏州脑空间信息研究院集采项目,中标金额超过千万。在此项目中,浪潮基于...


浪潮与百度联合发布ABC一体机 推进智慧计算的行业落地

在9月举办的2017 百度云智峰会 ABC SUMMIT 上,百度与浪潮共同发布了 ABC 一体机,双方将共同推动人工智能、大数据、云...


IDC发布《IDC MarketScape:中国大数据管理平台厂商评估,2017》

中国大数据市场整体热度逐步降低,数据应用开始落地,而应用的前提是建设统一的大数据管理平台。IDC调研了几十...


中科院国科创新与深圳福田区一揽子战略合作落子于CEEC

北京国科金服科技金融信息服务有限公司(以下称“国科金服”)与中国国际消费电子展示交易中心(以下称“CEEC”...


如何选择最佳汽车应用闪存

在过去几年里,汽车应用对 NOR 闪存的需求不断增加。NOR 闪存最初应用在信息娱乐和引擎控制等方面。然而,随着汽...


CA Technologies宣布为IBM z14提供支持交付可信任的系统

CA Technologies (NASDAQ:CA)今日宣布,CA关键的大型主机解决方案为IBM z14提供支持。CA的解决方案利用全新的z14平台,大大降...


手掌里的气象站,Silicon Labs SLSTK3201A Zero Geck测评

小壁虎EFM32作为MCU里面的超低功耗的佼佼者,很多开发者都不陌生。今天爱板网要介绍的是2017贸泽电子智造创新大赛...


大数据新时代:物联网让生活更加智慧

物联网(IoT,Internet of Things)这一概念最早在1999年提出。美国麻省理工学院建立的“自动识别中心(Auto-ID)”,首次提出“万物皆可通过网络互联”,并阐明物联网的基本含义。早期的物联网仅是...


技术牛逼也要懂点社交:数据科学家公司生存指南TOP30秘诀

作者:SeattleDataGuy 数据科学家老司机的30个经验之谈,教你如何在公司内获得认同,带你绕过他们曾经踩过的坑。 作...