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

新公司已呆了一个多月,如今动手一个数据可视化的项目,数据可视化一定要用到图形库如D3HighchartsEChartsChart等,经决议我的这个项目用阿里旗下蚂蚁金服所开辟的G2图表库。
官方地点:https://antv.alipay.com/g2/do…

Github:https://github.com/antvis

2016年宣布的开源库,时刻虽短但库功用完全,唯一不足的是社区太少,关于我这类菜鸟来说是件异常惆怅的事变,没办法硬着头皮终究找到思绪……项目完成之际写篇 G2 的相干功用的用法,协助更多运用 G2 的朋侪疾速上手。

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

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

为了更好得运用 G2 举行数据可视化,我们也和其他图形库一样,须要先相识图表的组成以及相干观点,完全的 G2 图表组成以下:

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

接下来各个组合的相干观点我将复制官网的:

坐标轴 axis

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

图例 legend

图例作为图表的辅佐元素,用于标定差别的数据范例以及数据的局限,用于辅佐浏览图表,协助用户在图表中举行数据的挑选过滤。

多少标记 geom

多少标记,即我们所说的点、线、面这些多少图形,在 G2 中多少标记的范例决议了天生图表的范例。也就是数据被可视化后的现实表现,差别的多少标都对应本身能辨认的图形属性。

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

提醒信息 tooltip

当鼠标悬停在某个点上时,会以框的情势显现当前点对应的数据的信息,比方该点的值,数据单元等。数据提醒框内提醒的信息还能够经由历程花样化函数动态指定。

辅佐标记 guide

当须要在图表上绘制一些辅佐线、辅佐框或许图片时,比方增添平均值线、最高值线或许标示显著的局限地区时,能够运用辅佐标记 guide。

接着如上所述G2的dom构造也是canvas,看图相识到实在它是由三层 canvas 组成的,这三层 canvas 离别对应 chart 对象的以下三个属性:

  1. frontCanvas 最上层 canvas,图例 legend、提醒信息 tooltip、和 text tag html 这三种范例的辅佐标记 guide 在这一层绘制;

  2. canvas 中间层,绘制图表的主体内容多少标记 geom;

  3. backCanvas 最基层 canvas,坐标轴 axis 和 line image rect arc 这四种范例的辅佐标记 guide 在这一层绘制。

相识完相干学问,如今就最先建立图形吧。须要先引入G2的JS文件:

<script src=”” target=”_blank”>https://a.alipayobjects.com/g…

引入后先看看怎样简朴的建立一个折线图,代码以下:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简朴线图</title>
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.1/g2.js"></script>
</head>
<body>
<div id="c1"></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>

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

行,接下来我们最先一步步剖析相识建立图形的代码离别是什么意义,剖析完末了我还会列出几个能够开辟中会用到的需求要领。

一、 任何图形库建立图形的时刻都不能缺乏一个步骤,就是实例化一个 Chart 对象(chart)。


//HTML:
<div id="c1"></div>

//JS:
var chart = new G2.Chart({
    id: 'c1',
    forceFit: true, // 这个示意图表宽度自适应,固然你能够本身定义宽度
    // width: 1000, // 本身设置宽度
    height: 450
});

固然除了设置宽高之外的款式还能够设置其他的,只须要设置 plotCfg 属性,该属性内里只包含三个款式属性。我想开辟人员对这三个属性都不会生疏,离别是borderbackgroundmargin

  1. border:用于设置全部 chart 的图表背景款式,包含边框,背景色,透明度,圆角等;

  2. background:用于设置 chart 画图地区的背景款式,包含边框,背景色,透明度,圆角等;

  3. margin:用于设置边距,用法同 CSS 中的 margin 属性雷同, [上,右,下,左]

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

二、 有了实例对象如今是预备一些数据,数据花样官方供应两种(data):

  1. JSON 数组

  2. Frame 对象

假如数据源是 JSON 数组,G2 在内部会将其转换成一个 Frame 对象。

JSON 数组:


 var data = [
     {"time": "2017-1","name": "中国","data": 43},
     {"time": "2017-2","name": "中国","data": 477},
     {"time": "2017-3","name": "中国","data": 403}
];

Frame 对象:

G2 的图表设置数据源后,在内部都会把数据转换成 Frame 对象,我们称之为数据鸠合,其是 JSON 数组的每条纪录举行列兼并的结果。

Frame 对象的花样以下:


{
  names: array, // 源数据中一切数据属性的鸠合。
  arr: array, // 一个二维数组,同 names 元素递次对应,存储每一个数据属性对应的数据值。
  data: array, // 存储原始 JSON 数组。
}

不太懂?看下面!

原始 JSON 数据:


 var data = [
     {"time": "2017-1","name": "中国","data": 43},
     {"time": "2017-2","name": "中国","data": 477},
     {"time": "2017-3","name": "中国","data": 403}
];

转 Frame 对象后:

namesarrdata
[“time”,name”,”data”][[“2017-1″,”2017-2″,”2017-3”],[“中国”,”中国”,中国],[43,477,403]][{“time”: “2017-1″,”name”: “中国”,”data”: 43},{“time”: “2017-2″,”name”: “中国”,”data”: 477},{“time”: “2017-3″,”name”: “中国”,”data”: 403}]

Frame 对象如今我们只须要相识,我们现实传的数据花样还是以 JSON 为主,转换这个历程我们没必要忧郁,官方供应了要领:


var Frame = G2.Frame;
var frame = new Frame(data); // 将 data 转换为 Frame 对象
console.log(frame); // {data: Array[2], names: Array[2], arr: Array[2]}

打印出结果:

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

三、 多少标记(geom)

什么是多少标记?即我们所说的点、线、面这些多少图形。G2 中并没有特定的图表范例(柱状图、散点图、折线图等)的观点,用户能够零丁绘制某一种范例的图表,如饼图,也能够绘制夹杂图表,比方折线图和柱状图的组合。

G2 天生的图表的范例,都是由多少标记决议的。能够经由历程下图直观得明白什么是多少标记:

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

怎样设置多少标记?

很简朴!建立好 chart 对象以后,就能够经由历程以下体式格局挑选多少标记的范例。


 chart.line().position('time*data').color('name').size(2); 
 // 这是上面的折线图,这里运用了 point 范例的 geom

虽然 G2 没有特定的图表范例观点,然则却基础支撑一切传统图表范例的绘制。下表展现 G2 中的 geom 和传统图表的对应关联,更多的图表详见 G2 官网的 文档( https://antv.alipay.com/g2/do… )以及 demo ( https://antv.alipay.com/g2/de… )。

geom 范例图表范例形貌
point点图、折线图中的点、茎恭弘=叶 恭弘图(仅显现文本)点的外形有许多,也能够运用图片代表点( https://antv.alipay.com/g2/de… ),同时点也能够在差别维度的坐标系下显现,所以能够扩展出异常多的图表范例。
path途径图,舆图上的途径途径图是无序的线图。( https://antv.alipay.com/g2/de…
line折线图、曲线图、电信号图在极坐标系下能够转换成雷达图。( https://antv.alipay.com/g2/de…
area地区图(面积图)、层叠地区图、区间地区图极坐标系下,雷达地区图。( https://antv.alipay.com/g2/de…
interval柱状图、直方图、玫瑰图、饼图、条形环图(玉缺图)、漏斗图经由历程坐标系的转置、变化,能够天生种种罕见的图表范例;一切的图表都能够举行层叠、分组。( https://antv.alipay.com/g2/de…
polygon色块图(像素图)、热力争、舆图多个点能够组成多边形。( https://antv.alipay.com/g2/de…
schemak线图,箱型图自定义的图表范例。
edge树图、流程图、关联图与点一同构建关联图。
heatmap热力争用于热力争的绘制。
contour等高线图用于等高线的绘制。

OK,如今图表范例有了,我们该怎样将我们的数据显现上去呢?很简朴!官方供应 position 将数据值映照到图形的位置上的要领。在 position 属性上,映照了两个属性: cut 和 price,离别示意将 cut 数据值映照至 x 轴坐标点,price 数据值映照至 y 轴坐标点。


// chart.point().position('cut*price');
chart.line().position('time*data') // 这里 time 将映照至x轴上,data 映照至y轴上

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

不出不测到这里数据应当已胜利映照到图形上了,下面就对图形举行一些定义吧。这里我列一些假如像相识更多请检察官方文档( https://antv.alipay.com/g2/ap…

  1. color

将数据值映照到图形的色彩上的要领。


chart.line().position('time*data').color('name'); 

color 只支撑吸收一个参数,value 能够是映照至色彩属性的数据源字段名,假如数据源中不存在这个字段名的话,则按照常量举行剖析,这个时刻会运用 G2 默许供应的色彩:

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

也能够直接指定某一个细致的色彩值 color,如 ‘#fff’, ‘white’ 等。细致能够检察官方文档( https://antv.alipay.com/g2/ap…

  1. size

将数据值映照到图形的大小上的要领。

传入的值是数字常量,如:


chart.line().position('time*data').size(2); 
  1. tooltip

将数据值映照到 Tooltip(浮窗) 上。

对应数据源的一个或许多个字段,当有多个时,运用 * 来衔接。


chart.line().position('time*data').tooltip('name*data');

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

  1. shape

将数据值映照到图形的外形上的要领。

只支撑吸收一个参数,指定多少图象对象绘制的外形。下表列出了差别的 geom 多少图形对象支撑的 shape 外形:

geom 范例shape 范例诠释
point‘circle’, ‘square’, ‘bowtie’, ‘diamond’, ‘hexagon’, ‘triangle’, ‘triangle-down’hollow 开首的图形都是空心的。
line‘line’,’smooth’,’dot’,’dash’,’dotSmooth’,’spline’—–
area‘area’,’smooth’,’line’,’dotLine’,’smoothLine’,’dotSmoothLine’—–
interval‘rect’,’hollowRect’,’line’,’tick’,’stroke’hollowRect 是空心的矩形,line 和 tick 都是线段,stroke 带边框的矩形。
polygon‘polygon’,’hollow’,’stroke’polygon 多边形、hollow 空心多边形和 stroke 带边框的多边形。
schema‘box’,’candle’如今仅支撑箱须图、K线图

细致能够检察官方文档( https://antv.alipay.com/g2/ap…

代码示例:


chart.line().position('time*data').shape('smooth');

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

四、坐标轴(axis)

这里举个例子,更多细致请检察官方文档( https://antv.alipay.com/g2/do…


chart.axis('data', {
    formatter: function(val) {
        return val/100 + '%';
    },
    title: null
});

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

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

五、图例(legend)

图例(legend)是图表的辅佐元素,运用色彩、大小、外形辨别差别的数据范例,用于图表中数据的挑选。G2 会依据设置图形属性映照以及数据的范例自动天生差别的图例。这里举个例子,更多细致请检察官方文档( https://antv.alipay.com/g2/do…


chart.legend({ 
  position: 'top', // 设置图例的显现位置
});

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

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

除此之外数据显现的称号也是能够自定义的,如:


chart.col('name',{
    alias: 啦啦啦国 //设置国度别号
});

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

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

到这里为止,G2 的基础运用就引见完了,这篇文章始终是简朴的引见罢了,现实开辟中一些须要注重的小问题以及一些有效的要领都要去参考官方文档,文档雄厚解释也比较清楚易懂。下面我将引见几个经常使用的要领。

五、一些要领

  1. clear

申明:清空图表上一切的绘制内容,然则不烧毁图表。

数据交互必用到的,每次增加数据或许删除数据都要调一次,不然图表不会更新,只会在原基础上继承累加数据。


chart.clear()
  1. animate

chart 是不是实行动画,默许值为 true,实行, false 不实行。

每次初始化页面或许举行数据交互时会有一个类似于过渡的结果


chart.animate(false);
  1. 绘制夹杂图表

比方像highcharts折线图和点图的组合


chart.line().position('time*data').tooltip('name*data').color('name').size(2).shape('smooth');
chart.point().position('time*data').tooltip('name*data').color('name').size(6).shape('circle');

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

G2 的引见就到这了,假如感兴趣能够去检察他的官网,若有疑问也迎接留言。配合进修!

    原文作者:阁主
    原文地址: https://segmentfault.com/a/1190000009411358
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞