使用G2创建饼图/How To Use G2 To Make Pie Chart

hui.zhao(56)

Published in

#utopian-io

Words

765

Reading

4 min

Listen

Play

Summary:

G2 is a set of graphically-based graphical syntax that is data-driven and highly user-friendly and extensible, allowing users to build a wide variety of interactive statistics without having to worry about detailed implementation details chart.
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

您将从这个教程中学到什么

如何引入js文件
如何定义容器
如何定义数据
如何定义图例
如何引用数据
如何定义坐标轴
如何定义提示框
如何渲染图表

学习此教程的必备条件

你需要一个代码编辑器，比如Eclipse，EditPlus，EmEditor等等
你需要下载g2.js，并在文件中调用

教程难度

容易

教程内容

演示效果

1. 知识点A - 如何引入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>

使用内嵌对js文件进行引入，用于后期图表使用。

2. 知识点B - 如何定义容器

<div id="piechart"></div>

使用div定义容器，用于展示图表。容器名：piechart。

3. 知识点C - 如何定义数据

  const data = [
    { item: 'Demo-A', count: 35 },
    { item: 'Demo-B', count: 24 },
    { item: 'Demo-C', count: 17 },
    { item: 'Demo-D', count: 10 },
    { item: 'Demo-E', count: 14 }
  ];

data：使用数组形式定义数据。
格式：{名称:'图例名称',数据名:对应值}

4. 知识点D - 如何定义图例

  const dv = new DataView();
  dv.source(data).transform({
    type: 'percent',
    field: 'count',
    dimension: 'item',
    as: 'percent'
  });

source：从data数组获取数据.
type：属性定义为percent，表示统计某个维度下某个字段的值的和占总和的比例（可以分组）。
fields：统计发生的字段（求和，求百分比）
dimension：统计的维度字段，也就是"每个不同的dimension下，field值占总和的百分比"
as：将结果存储在percent字段

5. 知识点E - 如何引用数据

  const chart = new G2.Chart({
    container: 'piechart',
    forceFit: true,
    height: window.innerHeight,
  });
  chart.source(dv, {
    percent: {
      formatter: val => {
        val = (val * 100) + '%';
        return val;
      }
    }
  });

container：定于数据从piechart数组取值。
forceFit: 定义图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
height: 定义图表高度。
source：定义为chart装载数据，返回chart对象。

6. 知识点F - 如何定义坐标轴

  chart.coord('theta', {
    radius: 0.75
  });

coord：设置坐标系类型，同时允许进行各种坐标系变换，默认为笛卡尔坐标系。
radius：设置半径，值范围为 0 至 1

7. 知识点G - 如何定义提示框

  chart.tooltip({
    showTitle: false,
    itemTpl: '{name}: {value}
'
  });

tooltip：图表的 tooltip 配置，G2 图表的 tooltip 使用 html 渲染。
showTitle：定义是否显示标题。
itemTpl：定义显示格式。

8. 知识点H - 如何渲染图表

  chart.intervalStack()
    .position('percent')
    .color('item')
    .label('percent', {
      formatter: (val, item) => {
        return item.point.item + ': ' + val;
      }
    })
    .tooltip('item*percent', (item, percent) => {
      percent = percent * 100 + '%';
      return {
        name: item,
        value: percent
      };
    })
    .style({
      lineWidth: 1,
      stroke: '#fff'
    });
  chart.render();

render：图表绘制的最后一步，用于将图表渲染至画布。

完整代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础饼图</title>
</head>
<body>
<div id="piechart"></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>
  const { DataView } = DataSet;
  const data = [
    { item: 'Demo-A', count: 40 },
    { item: 'Demo-B', count: 24 },
    { item: 'Demo-C', count: 17 },
    { item: 'Demo-D', count: 10 },
    { item: 'Demo-E', count: 9 }
  ];
  const dv = new DataView();
  dv.source(data).transform({
    type: 'percent',
    field: 'count',
    dimension: 'item',
    as: 'percent'
  });
  const chart = new G2.Chart({
    container: 'piechart',
    forceFit: true,
    height: window.innerHeight,
  });
  chart.source(dv, {
    percent: {
      formatter: val => {
        val = (val * 100) + '%';
        return val;
      }
    }
  });
  chart.coord('theta', {
    radius: 0.75
  });
  chart.tooltip({
    showTitle: false,
    itemTpl: '{name}: {value}
'
  });
  chart.intervalStack()
    .position('percent')
    .color('item')
    .label('percent', {
      formatter: (val, item) => {
        return item.point.item + ': ' + val;
      }
    })
    .tooltip('item*percent', (item, percent) => {
      percent = percent * 100 + '%';
      return {
        name: item,
        value: percent
      };
    })
    .style({
      lineWidth: 1,
      stroke: '#fff'
    });
  chart.render();
</script>
</body>
</html>