使用G2创建扰动点图/How To Use G2 To Make Jitter Point Chart

hui.zhao (56)in #utopian-io • 6 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文件
如何定义容器
如何定义数据
如何引用数据&定义提示信息
如何定义坐标轴
如何渲染图表

学习此教程的必备条件

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

最终效果

系列课程

如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。
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

#zqz-tutorial