使用G2创建双轴图表/How To Use G2 To Make Bar & Line Chart

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对js文件进行引入，用于后期图表使用。

2. 知识点B - 如何定义数据

const data = [
  { time: '08:00', DemoA: 2, DemoB: 2 },
  { time: '09:00', DemoA: 6, DemoB: 3 },
  { time: '10:00', DemoA: 2, DemoB: 5 },
  { time: '11:00', DemoA: 9, DemoB: 1 },
  { time: '12:00', DemoA: 2, DemoB: 3 },
  { time: '13:00', DemoA: 2, DemoB: 1 },
  { time: '14:00', DemoA: 1, DemoB: 2 }
];

data：使用数组形式定义数据。
格式：{x轴名称：'x轴值',名称:值,名称:值}

3. 知识点C - 如何引用数据

const chart = new G2.Chart({
  container: 'shuangzhou',
  forceFit: true,
  height: 400
});
chart.source(data, {
  DemoB: {
    min: 0
  },
  DemoA: {
    min: 0
  }
});

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

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

chart.legend({
  custom: true,
  allowAllCanceled: true,
  items: [
    { value: 'DemoA', marker: {symbol: 'square', fill: '#3182bd', radius: 5} }, 
    { value: 'DemoB', marker: {symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3} }
  ],
  onClick: ev => {
    const item = ev.item;
    const value = item.value;
    const checked = ev.checked;
    const geoms = chart.getAllGeoms();
    for (let i = 0; i < geoms.length; i++) {
      const geom = geoms[i];
      if (geom.getYScale().field === value) {
        if (checked) {
          geom.show();
        } else {
          geom.hide();
        }
      }
    }
  }
});

legend：配置图表图例。
allowAllCanceled：对分类类型的图例生效，表示是否允许所有图例项被取消选中，默认为 false，即必须保留一个被选中的图例项。
marker：对分类类型的图例生效，用于设置图例的 marker 样式，默认按照 geom 的类型显示。

5. 知识点E - 如定义坐标轴

chart.axis('DemoB', {
  grid: null,
  label: {
    textStyle:{
      fill: '#fdae6b'
    }
  }
});

axis：坐标轴配置，该方法返回 chart 对象。
textStyle：定义文字样式。

6. 知识点F - 如何渲染

chart.interval()
  .position('time*DemoA')
  .color('#3182bd');
chart.line()
  .position('time*DemoB')
  .color('#fdae6b')
  .size(3)
  .shape('smooth');
chart.point()
  .position('time*DemoB')
  .color('#fdae6b')
  .size(3)
  .shape('circle');
chart.render();

interval：创建柱图，返回一个 geom 对象。
line：创建线图，返回一个 geom 对象。
point：创建点图图，返回一个 geom 对象。
size：将数据值映射到图形的大小上的方法。使用字段映射到大小，并指定最大值和最小值
color：将数据值映射到图形的颜色上的方法。
shape：将数据值映射到图形的形状上的方法。值为circle，表示为圆形。
render：图表绘制的最后一步，用于将图表渲染至画布。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双轴图表</title>
</head>
<body>
<div id="shuangzhou"></div>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script>
const data = [
  { time: '08:00', DemoA: 2, DemoB: 2 },
  { time: '09:00', DemoA: 6, DemoB: 3 },
  { time: '10:00', DemoA: 2, DemoB: 5 },
  { time: '11:00', DemoA: 9, DemoB: 1 },
  { time: '12:00', DemoA: 2, DemoB: 3 },
  { time: '13:00', DemoA: 2, DemoB: 1 },
  { time: '14:00', DemoA: 1, DemoB: 2 }
];
const chart = new G2.Chart({
  container: 'shuangzhou',
  forceFit: true,
  height: 400
});
chart.source(data, {
  DemoB: {
    min: 0
  },
  DemoA: {
    min: 0
  }
});
chart.legend({
  custom: true,
  allowAllCanceled: true,
  items: [
    { value: 'DemoA', marker: {symbol: 'square', fill: '#3182bd', radius: 5} }, 
    { value: 'DemoB', marker: {symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3} }
  ],
  onClick: ev => {
    const item = ev.item;
    const value = item.value;
    const checked = ev.checked;
    const geoms = chart.getAllGeoms();
    for (let i = 0; i < geoms.length; i++) {
      const geom = geoms[i];
      if (geom.getYScale().field === value) {
        if (checked) {
          geom.show();
        } else {
          geom.hide();
        }
      }
    }
  }
});
chart.axis('DemoB', {
  grid: null,
  label: {
    textStyle:{
      fill: '#fdae6b'
    }
  }
});
chart.interval()
  .position('time*DemoA')
  .color('#3182bd');
chart.line()
  .position('time*DemoB')
  .color('#fdae6b')
  .size(3)
  .shape('smooth');
chart.point()
  .position('time*DemoB')
  .color('#fdae6b')
  .size(3)
  .shape('circle');
chart.render();
</script></body>
</html>

最终效果

系列课程

如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。
您可以使用zqz-tutorial标签快速查看我发布的所有教程。

Posted on Utopian.io - Rewarding Open Source Contributors

Sort Order:

Trending

[-]

manishmike10 (63) · 7 years ago

Your contribution cannot be approved because it does not follow the Utopian Rules.

No contribution on G2 will be accepted because they are all similar to echarts
You can contact us on Discord.
[utopian-moderator]

$1.93

1 vote

utopian.tip (46) · 7 years ago

Hey @manishmike10, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

$0.00