G2 图表示例
源码
g2-react
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Aster plot</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
      var data = [{"label":"Fisheries","colour":"#9E0041","score":59},{"label":"Mariculture","colour":"#C32F4B","score":24},{"label":"Artisanal Fishing Opportunities","colour":"#E1514B","score":98},{"label":"Natural Products","colour":"#F47245","score":60},{"label":"Carbon Storage","colour":"#FB9F59","score":74},{"label":"Coastal Protection","colour":"#FEC574","score":70},{"label":"Tourism &  Recreation","colour":"#FAE38C","score":42},{"label":"Livelihoods","colour":"#EAF195","score":77},{"label":"Economies","colour":"#C7E89E","score":88},{"label":"Iconic Species","colour":"#9CD6A4","score":60},{"label":"Lasting Special Places","colour":"#6CC4A4","score":65},{"label":"Clean Waters","colour":"#4D9DB4","score":71},{"label":"Habitats","colour":"#4776B4","score":88},{"label":"Species","colour":"#5E4EA1","score":83}];
13
      var chart = new G2.Chart({
14
        id: 'c1',
15
        forceFit: true,
16
        height: 450
17
      });
18
      chart.source(data);
19
      chart.coord('polar', {
20
        inner: 0.2
21
      });
22
      chart.legend(false);
23
      chart.axis('score', false);
24
      chart.axis('label', {
25
        labels: null
26
      });
27
      chart.interval().position('label*score').color('colour', function(val) {
28
        return val;
29
      }).style({
30
        stroke: '#999',
31
        lineWidth: 1
32
      }).tooltip('score');
33
      chart.render();
34
    </script>
35
  </body>
36
</html>
37
​

Aster plot

极坐标下的柱状图。