G2 - The Grammar Of Graphics

点图 / 散点矩阵

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>散点矩阵</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
$.getJSON('../../static/data/Iris-flower.json',function(data){
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c1',
    width : 1000,
    height : 500,
    plotCfg: {
      margin: [20, 200]
    }
  });
  var items = ['SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'];
  var x = 0;
  var y = 0;
  for (var v = 0; v < items.length; v++) {
    for (var h = 0; h < items.length; h++) {
      var view = chart.createView({
        index: h + v,
        start: {
          x: x,
          y: y
        },
        end: {
          x: x + 0.2,
          y: y + 0.2
        }
      });
      view.source(data);
      view.axis(items[h], {
        title: null,
          labels: null,
          line: {
            stroke: '#000'
          },
          tickLine: {
            stroke: '#000'
          }
      });
      view.axis(items[v], {
        title: null,
        labels: null,
        line: {
          stroke: '#000'
        },
        tickLine: {
          stroke: '#000'
        }
      });
      view.point().position(items[h] + "*" + items[v])
        .color('Species', ['#880000', '#008800', '#000088'])
        .opacity(0.5)
        .shape('circle')
        .size(3);
      if (v === 3) {
        // 横向维度显示
        chart.guide().text([x + 0.02, 0.95 - (y + 0.2)], items[h]);
      }
      x += 0.25;
    }
    x = 0;
    y += 0.25;
    // 纵向维度显示
    chart.guide().text([x-0.015, 1.07 - y], items[v], {
      rotate: -90
    });
  }
  chart.render();
});
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
$.getJSON('../../static/data/Iris-flower.json',function(data){
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c1',
    width : 1000,
    height : 500,
    plotCfg: {
      margin: [20, 200]
    }
  });
  var items = ['SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'];
  var x = 0;
  var y = 0;
  for (var v = 0; v < items.length; v++) {
    for (var h = 0; h < items.length; h++) {
      var view = chart.createView({
        index: h + v,
        start: {
          x: x,
          y: y
        },
        end: {
          x: x + 0.2,
          y: y + 0.2
        }
      });
      view.source(data);
      view.axis(items[h], {
        title: null,
          labels: null,
          line: {
            stroke: '#000'
          },
          tickLine: {
            stroke: '#000'
          }
      });
      view.axis(items[v], {
        title: null,
        labels: null,
        line: {
          stroke: '#000'
        },
        tickLine: {
          stroke: '#000'
        }
      });
      view.point().position(items[h] + "*" + items[v])
        .color('Species', ['#880000', '#008800', '#000088'])
        .opacity(0.5)
        .shape('circle')
        .size(3);
      if (v === 3) {
        // 横向维度显示
        chart.guide().text([x + 0.02, 0.95 - (y + 0.2)], items[h]);
      }
      x += 0.25;
    }
    x = 0;
    y += 0.25;
    // 纵向维度显示
    chart.guide().text([x-0.015, 1.07 - y], items[v], {
      rotate: -90
    });
  }
  chart.render();
});
</script>

</body>
  </html>

散点矩阵

散点图矩阵是散点图的高维扩展，它从一定程度上克服了在平面上展示高维数据的困难，在展示多维数据的两两关系时有着不可替代的作用。

数据摘自