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
      var data = [
13
        {year: '2000',internally:21.0 ,refugees:16 ,seekers: 0.8},
14
        {year: '2001',internally:25.0 ,refugees:16 ,seekers: 0.8},
15
        {year: '2002',internally:25.0 ,refugees:15 ,seekers: 0.8},
16
        {year: '2003',internally:25.0 ,refugees:14 ,seekers: 0.7},
17
        {year: '2004',internally:25.0 ,refugees:14 ,seekers: 0.7},
18
        {year: '2005',internally:24.0 ,refugees:13 ,seekers: 0.8},
19
        {year: '2006',internally:24.0 ,refugees:14 ,seekers: 0.7},
20
        {year: '2007',internally:26.0 ,refugees:16 ,seekers: 0.7},
21
        {year: '2008',internally:26.0 ,refugees:15.2 ,seekers: 0.8},
22
        {year: '2009',internally:27.1 ,refugees:15.2 ,seekers: 1.0},
23
        {year: '2010',internally:27.5 ,refugees:15.4 ,seekers: 0.8},
24
        {year: '2011',internally:26.4 ,refugees:15.2 ,seekers: 0.9},
25
        {year: '2012',internally:28.8 ,refugees:15.4 ,seekers: 0.9},
26
        {year: '2013',internally:33.3 ,refugees:16.7 ,seekers: 1.2},
27
        {year: '2014',internally:38.2 ,refugees:19.5 ,seekers: 1.8}
28
      ];
29
      var Frame = G2.Frame;
30
      var frame = new Frame(data); // 加工数据
31
      frame = Frame.combinColumns(frame, ['internally', 'refugees', 'seekers'], 'count', '难民类型', 'year');
32
      var chart = new G2.Chart({
33
        id: 'c1',
34
        forceFit: true,
35
        height: 450
36
      });
37
      chart.source(frame);
38
      chart.coord('polar', {inner: 0.1});
39
      chart.legend('难民类型', {
40
        position: 'bottom'
41
      });
42
      chart.intervalStack().position('year*count')
43
        .color('难民类型',['rgb(136,186,174)','rgb(184,189,61)','rgb(107,136,138)'])
44
        .style({
45
        lineWidth: 1,
46
        stroke: '#fff'
47
      });
48
      chart.render();
49
    </script>
50
  </body>
51
</html>
52
​

南丁格尔玫瑰图

南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，是南丁格尔在克里米亚战争期间提交的一份关于士兵死伤的报告时发明的一种图表,是在极坐标下绘制的柱状图，使用圆弧的半径长短表示数据的大小（数量的多少）。 了解更多