G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>行分面</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script>
12
      $.getJSON('../../../static/data/diamond.json',function (data) {
13
        var chart = new G2.Chart({
14
          id: 'c1',
15
          forceFit: true,
16
          height: 450,
17
          plotCfg: {
18
            margin: [40, 80, 80, 80]
19
          }
20
        });
21
        chart.source(data);
22
        chart.legend('clarity', {
23
          position: 'bottom'
24
        }); // 设置底部图例
25
        chart.facet([,'clarity']);
26
        chart.point().position('carat*price').color('clarity');
27
        chart.render();
28
      });
29
    </script>
30
  </body>
31
</html>
32
​

行分面