扰动点图 - AntV

散点图

扰动点图

Jitter Point Chart，扰动点图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>扰动点图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/dv-grades.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data);
    chart.tooltip({
      crosshairs: {
        type: 'cross'
      }
    });
    chart.legend({
      reversed: true // 图例项逆序显示
    });
    chart.axis('Score', {
      grid: null
    });
    // x轴的栅格线居中
    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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>扰动点图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/dv-grades.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data);
    chart.tooltip({
      crosshairs: {
        type: 'cross'
      }
    });
    chart.legend({
      reversed: true // 图例项逆序显示
    });
    chart.axis('Score', {
      grid: null
    });
    // x轴的栅格线居中
    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>

图表简介

Jitter Point Chart，扰动点图。

了解更多

图表用法

扰动点图用于展示一个数据集中连续变量如何随着分类变量水平的变化而变化。

关联图表

点图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接