使用G2创建雷达图/How To Use G2 To Make Radar Chart

in #utopian-io4 years ago (edited)

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文件
  • 如何定义数据
  • 如何引用数据
  • 如何定义坐标轴
  • 如定义图例
  • 如何渲染图表

学习此教程的必备条件

教程难度

  • 简单

教程内容

演示效果
demo.gif

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>

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


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

  const { DataView } = DataSet;
  const data = [
    { item: 'Design', a: 70, b: 30 },
    { item: 'Development', a: 60, b: 70 },
    { item: 'Marketing', a: 50, b: 60 },
    { item: 'Users', a: 40, b: 50 },
    { item: 'Test', a: 60, b: 70 },
    { item: 'Language', a: 70, b: 50 },
    { item: 'Technology', a: 50, b: 40 },
    { item: 'Support', a: 30, b: 40 },
    { item: 'Sales', a: 60, b: 40 },
    { item: 'UX', a: 50, b: 60 }
  ];
  • data:使用数组形式定义数据。
  • item:定义极坐标名称。

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

  const chart = new G2.Chart({
    container: 'radarchart',
    forceFit: true,
    height: window.innerHeight,
    padding: [ 20, 20, 95, 20 ]
  });
  chart.source(dv, {
    score: {
      min: 0,
      max: 80
    }
  });
  • container:定于数据从radarchart数组取值。
  • forceFit: 定义图表的宽度自适应开关,默认为 false,设置为 true 时表示自动取 dom(实例容器)的宽度。
  • height: 定义图表高度。
  • padding:定义四周的间距。
  • source:为 chart 装载数据,返回 chart 对象。
  • max:自定义最大值
  • min:自定义最小值

4. 知识点D - 如何定义坐标轴

  chart.axis('item', {
    line: null,
    tickLine: null,
    grid: {
      lineStyle: {
        lineDash: null
      },
      hideFirstLine: false
    }
  });
  chart.axis('score', {
    line: null,
    tickLine: null,
    grid: {
      type: 'polygon',
      lineStyle: {
        lineDash: null
      },
      alternateColor: 'rgba(0, 0, 0, 0.04)',
    }
  });
  • axis:坐标轴配置,该方法返回 chart 对象。
  • line:定义坐标轴线。
  • tickLine:设置坐标轴的刻度线。如果该属性值为 null 则表示不展示。
  • grid:设置坐标轴网格线的样式,网格线与坐标轴线垂直。如果该属性值为 null 则表示不展示。
  • linestyle:网格线的虚线配置,第一个参数描述虚线的实部占多少像素,第二个参数描述虚线的虚部占多少像素。
  • hideFirstLine:是否隐藏第一条网格线,默认为 false。

5. 知识点E - 如定义图例

  chart.legend('user', {
    marker: 'circle',
    offset: 30
  });
  • legend:配置图表图例。
  • marker:对分类类型的图例生效,用于设置图例的 marker 样式,默认按照 geom 的类型显示。
  • offset:设置 tooltip 距离鼠标的偏移量。

6. 知识点F - 如何渲染

  chart.line().position('item*score').color('user').size(2);
  chart.point().position('item*score').color('user').shape('circle').size(4).style({
    stroke: '#fff',
    lineWidth: 1,
    fillOpacity: 1
  });
  chart.render();
  • line:创建线图,返回一个geom对象。
  • point:创建点图图,返回一个geom对象。
  • stroke:定义线的颜色。
  • lineWidth:定义线的宽度。
  • render:图表绘制的最后一步,用于将图表渲染至画布。

完整代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷达图</title>
</head>
<body>
<div id="radarchart"></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: 'Design', a: 70, b: 30 },
    { item: 'Development', a: 60, b: 70 },
    { item: 'Marketing', a: 50, b: 60 },
    { item: 'Users', a: 40, b: 50 },
    { item: 'Test', a: 60, b: 70 },
    { item: 'Language', a: 70, b: 50 },
    { item: 'Technology', a: 50, b: 40 },
    { item: 'Support', a: 30, b: 40 },
    { item: 'Sales', a: 60, b: 40 },
    { item: 'UX', a: 50, b: 60 }
  ];
  const dv = new DataView().source(data);
  dv.transform({
      type: 'fold',
      fields: [ 'a', 'b' ], 
      key: 'user', 
      value: 'score', 
    });
  const chart = new G2.Chart({
    container: 'radarchart',
    forceFit: true,
    height: window.innerHeight,
    padding: [ 20, 20, 95, 20 ]
  });
  chart.source(dv, {
    score: {
      min: 0,
      max: 80
    }
  });
  chart.coord('polar', {
    radius: 0.8
  });
  chart.axis('item', {
    line: null,
    tickLine: null,
    grid: {
      lineStyle: {
        lineDash: null
      },
      hideFirstLine: false
    }
  });
  chart.axis('score', {
    line: null,
    tickLine: null,
    grid: {
      type: 'polygon',
      lineStyle: {
        lineDash: null
      },
      alternateColor: 'rgba(0, 0, 0, 0.04)',
    }
  });
  chart.legend('user', {
    marker: 'circle',
    offset: 30
  });
  chart.line().position('item*score').color('user').size(2);
  chart.point().position('item*score').color('user').shape('circle').size(4).style({
    stroke: '#fff',
    lineWidth: 1,
    fillOpacity: 1
  });
  chart.render();
</script>
</body>
</html>

最终效果
demo.gif

系列课程

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



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

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

Taken from https://antv.alipay.com/zh-cn/g2/3.x/demo/radar/basic.html

You can contact us on Discord.
[utopian-moderator]