使用G2创建扰动点图/How To Use G2 To Make Jitter Point 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 src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>

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


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

<div id="jitterpointchart"></div>

使用div定义容器,用于展示图表。容器名:jitterpointchart


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

  $.getJSON('/assets/data/dv-grades.json',)
  • getJSON: 定义从外部json文件获取数据。
  • 格式:{"Class":"x轴值","Grade":"图例值","Score":数据值}

4. 知识点D - 如何引用数据&定义提示信息

    const chart = new G2.Chart({
      container: 'jitterpointchart',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data);
    chart.tooltip({
      crosshairs: {
        type: 'cross'
      }
    });
  • container:定于数据从jitterpointchart数组取值。
  • forceFit: 定义图表的宽度自适应开关,默认为 false,设置为 true 时表示自动取 dom(实例容器)的宽度。
  • height: 定义图表高度。
  • window.innerHeight: 获取页面可用高度。
  • source:定义为chart装载数据,返回chart对象。
  • tooltip:定义提示框。

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

    chart.axis('Score',{
      grid: null
    });
    chart.axis('Class',{
      tickLine: null,
      subTickCount: 1, 
      subTickLine: {
        lineWidth: 1,
        stroke: '#BFBFBF',
        length: 4
      },
      grid: {
        align: 'center', // 网格顶点从两个刻度中间开始
        lineStyle: {
          stroke: '#8C8C8C',
          lineWidth: 1,
          lineDash: [ 3, 3 ]
        }
      }
    });
  • axis:坐标轴配置,该方法返回 chart 对象。
  • tickline:定义坐标轴的刻度线。
  • subTickCount: 设置每两个刻度之间次刻度线的个数,默认为 0,即不展示次刻度线。
  • subTickLine: 设置次刻度线的样式,仅当 subTickCount 不为 0 时生效。。
  • lineWidth: 定义线宽。
  • stroke:定义线颜色。
  • length:次刻度线的长度,可以为负值(表示反方向渲染)

6. 知识点F - 如何渲染图表

    chart.point().position('Class*Score')
    .color('Grade')
    .adjust('jitter')
    .shape('circle')
    .opacity(0.65)
    .size(4);
    chart.render();
  • chart.point:创建点图图,返回一个 geom 对象。
  • adjust:声明几何标记对象的数据调整方式,可用于绘制层叠图、扰动图、分组图等。支持单一的数据调整方式也支持各种数据调整方式的组合。
  • shape:将数据值映射到图形的形状上的方法。
  • opacity:将数据值映射到图形的透明度上的方法。
  • render:用于将图表渲染至画布。

完整代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扰动点图</title>
</head>
<body>
<div id="jitterpointchart"></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>
  $.getJSON('/assets/data/dv-grades.json', function(data){
    const chart = new G2.Chart({
      container: 'jitterpointchart',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data);
    chart.tooltip({
      crosshairs: {
        type: 'cross'
      }
    });
    chart.legend({
      reversed: true
    });
    chart.axis('Score',{
      grid: null
    });
    chart.axis('Class',{
      tickLine: null,
      subTickCount: 1,
      subTickLine: {
        lineWidth: 1,
        stroke: '#BFBFBF',
        length: 4
      },
      grid: {
        align: 'center', 
        lineStyle: {
          stroke: '#8C8C8C',
          lineWidth: 1,
          lineDash: [ 3, 3 ]
        }
      }
    });
    chart.point().position('Class*Score')
    .color('Grade')
    .adjust('jitter')
    .shape('circle')
    .opacity(0.65)
    .size(4);
    chart.render();
  });
</script>
</body>
</html>

最终效果
demo.gif

系列课程

  • 如果您喜欢我的教程,可以在我的个人档案页面,获取更多信息。
    If you like my tutorial , You can check out your profile for more such tutorials.
  • 您可以使用zqz-tutorial标签快速查看我发布的所有教程
    You can use the "zqz-tutorial" tag to see all the tutorials I've posted.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

@hui.zhao, Like your contribution, upvote.

Good, please upvote me, me is upvote you

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/point/jitter.html

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