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

jubi

Published: 22 Jan 2018 › Updated: 22 Jan 2018 使用g2创建柱状图/How to use g2 to make a bar chart

使用g2创建柱状图/How to use g2 to make a 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 bar chart by g2.

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

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

您能从本教程学到什么?

代码整体结构
怎么调用g2.js
怎么创建容器
怎么录入数据
怎么创建chart对象
怎么调用数据
怎么创建柱形以及渲染图表

需要的准备条件

你需要一个代码编辑器，比如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>
  </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>

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

要点3：怎么创建容器

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

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

要点4：怎么录入数据

  const chart_data = [
        { name: 'A', data1: 25 },
        { name: 'B', data1: 15 },
        { name: 'C', data1: 10 },
        { name: 'D', data1: 30 },
        { name: 'E', data1: 10 },
        { name: 'F', data1: 21.5 },
        { name: 'G', data1: 50 },
        { name: 'H', data1: 32 },
        { name: 'I', data1: 20 },
        { name: 'J', data1: 14 },
        { name: 'K', data1: 18 }
      ];

使用const 定义，此处使用变量名为chart_data，有2组数据，前面name定义是名称，后面data1是具体数据。

要点5：怎么创建chart对象

const chart = new G2.Chart({
        container: 'container-demo', 
        width : 500, 
        height : 400 
      });

container 指定图表容器

width 图表宽度

height 图表高度

要点6：怎么调用数据

 chart.source(chart_data);

使用chart.soure() 函数，此处调用 chart_data数据源。

要点7：怎么创建柱形以及渲染图表

chart.interval().position('name*data1').color('name')
chart.render();

chart.interval()创建图形，将name 和data1 分别映射到x轴和y轴。

.color('name')

是图例颜色，name映射到x轴，所以图例显示x轴name名称。如果此处设置为.color('data1'),则图例显示Y轴数值变化，实例为：

如果.color('name')，则图例显示的是x轴名称，实例如下：

完整实例如下：

完整代码如下：

<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>
  </head>
  <body>
    <div id="container-demo"></div>
    <script>
      const chart_data = [
        { name: 'A', data1: 25 },
        { name: 'B', data1: 15 },
        { name: 'C', data1: 10 },
        { name: 'D', data1: 30 },
        { name: 'E', data1: 10 },
        { name: 'F', data1: 21.5 },
        { name: 'G', data1: 50 },
        { name: 'H', data1: 32 },
        { name: 'I', data1: 20 },
        { name: 'J', data1: 14 },
        { name: 'K', data1: 78 },
         { name: 'L', data1: 52 },
        { name: 'M', data1: 20 },
        { name: 'N', data1: 34 },
        { name: 'O', data1: 38 }
      ]; 
      const chart = new G2.Chart({
        container: 'container-demo',
        width : 900, 
        height : 300
      });
      chart.source(chart_data);
      chart.interval().position('name*data1').color('name')
      chart.render();
    </script>
  </body>
</html>

Posted on Utopian.io - Rewarding Open Source Contributors

Leave 使用g2创建柱状图/How to use g2 to make a bar chart to:

Written by jubi

Best Posts From jubi

We have not curated any of jubi's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

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