使用g2创建堆叠柱状图/How to use g2 to make a stacked bar chart

Summary:
Javascript has a lot of open source chart Libraries,g2.js is one of them,today i will show you how to create a stacked bar chart by g2.

Javascript 有很多开源图表库，g2.js就是其中之一，今天教程将教大家如何使用g2.js去绘制一张堆叠柱状图。

• 兼容浏览器：IE, Chrome,Firefox等等

您能从本教程学到什么?

• 代码整体结构
• 怎么调用g2.js
• 怎么创建容器
• 怎么录入数据
• 怎么定义数据集、数据视图
• 怎么使用数据转换函数
• 怎么创建chart对象
• 怎么调用数据
• 怎么设置XY轴
• 怎么创建柱形以及渲染图表

需要的准备条件

• 你需要一个代码编辑器，比如atom，EmEditor等等,当然因为是文本编辑，可以直接通过浏览器打开，typora这类文本编辑器也可以进行代码编辑。
• 你需要下载g2.js（如果不下载到本地，也可以在线调用，参考要点2.）

本教程难度

• 简单

教程内容

下面请先看一个简单例子：

要点1：代码整体结构

<html>
  <head>
    <title>bar chart</title>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <div id="container-demo"></div>
    <script>
      //g2 code here
    </script>
  </body>
</html>

html结构，我们创建图表的代码是js语句，所以关键代码是放在< script>里面。下面将详细讲解关键代码。

要点2：怎么调用g2.js

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>

如果本地没有g2.js库，可以使用其在线js资源。直接在head区域引用就可以了。

要点3：怎么创建容器

 <div id="container-demo-bar"></div>

在body区域内，创建名为：container-demo 的容器，名字可以随便取。

要点4：怎么录入数据

  const data = [
    { 'State': 'name1', 'A': 86, 'B': 67, 'C':19 ,'D':124},
    { 'State': 'name2', 'A': 32, 'B': 39, 'C': 12, 'D':14},
    { 'State': 'name3', 'A': 33, 'B': 38, 'C': 17, 'D':12},
    { 'State': 'name4', 'A': 96, 'B': 58, 'C': 14, 'D':34},
    { 'State': 'name5', 'A': 73, 'B': 40, 'C': 23, 'D':44}
  ];

使用const 定义，此处使用 变量名为data

state 状态量，此处"name1"是显示在y轴各个数据名称。 后面'A': 86, 是其中某一数据， 格式为'name':value，可以同时有多个具体数据。但是各个state得对应。

要点5：怎么定义数据集、数据视图

const ds = new DataSet();
const dv = ds.createView().source(data);

使用const定义数据集：DataSet()

使用const定义数据视图：ds.createView().source(data);

要点6：怎么使用数据转换函数

dv.transform({
    type: 'fold',
    fields: [ 'A', 'B', 'C','D' ], 
    key: 'demo1',
    value: 'demo-amount',
    retains: [ 'State' ] 
  });

type：类型，fold为堆叠

转换函数使用字段，fields \key\value

retains:保留字段为state

要点7：怎么创建chart对象

  const chart = new G2.Chart({
    container: 'container-demo-bar',
    forceFit: true,
    height: window.innerHeight
  });

container 容器

forceFit 自动填充

height 高度

要点8：怎么调用数据

chart.source(dv);
chart.coord().transpose();

要点9：怎么设置XY轴/创建图形

chart.axis('State', {
    label: {
      offset: 12
    }
  });

此处xy轴是反转的。x轴使用的是 state字段

offset 偏移量

chart.intervalStack().position('State*demo-amount').color('demo1');

chart.interval()创建图形，将state和demo-amount分别映射到x轴和y轴。

.color('demo1')

是图例颜色，图例显示demo1字段。实例为：

要点10：怎么渲染图表

chart.render();

完整实例如下：

完整代码如下：

<html>
<head>
    <title>DEMO</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="container-demo"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  const data =  [
    { 'State': 'name1', 'A': 86, 'B': 67, 'C':19 ,'D':124, 'E':89 ,'F':14},
    { 'State': 'name2', 'A': 32, 'B': 39, 'C': 12, 'D':14, 'E':89 ,'F':14},
    { 'State': 'name3', 'A': 33, 'B': 38, 'C': 17, 'D':12, 'E':89 ,'F':14},
    { 'State': 'name4', 'A': 96, 'B': 58, 'C': 14, 'D':34, 'E':89 ,'F':14},
    { 'State': 'name5', 'A': 73, 'B': 40, 'C': 23, 'D':44, 'E':89 ,'F':14}
  ];
  const ds = new DataSet();
  const dv = ds.createView().source(data);
  dv.transform({
    type: 'fold',
    fields: [ 'A', 'B', 'C','D','E','F' ], 
    key: 'demo1', 
    value: 'demo-amount', 
    retains: [ 'State' ] 
  });
  const chart = new G2.Chart({
    container: 'container-demo',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(dv);
  chart.coord().transpose();
  chart.axis('State', {
    label: {
      offset: 22
    }
  });
  chart.intervalStack().position('State*demo-amount').color('demo1');
  chart.render();
</script>
</body>
</html>

---

Posted on Utopian.io - Rewarding Open Source Contributors

---