G2 - 南丁格尔玫瑰图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>南丁格尔玫瑰图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
  var data = [
    {year: '2000',internally:21.0 ,refugees:16 ,seekers: 0.8},
    {year: '2001',internally:25.0 ,refugees:16 ,seekers: 0.8},
    {year: '2002',internally:25.0 ,refugees:15 ,seekers: 0.8},
    {year: '2003',internally:25.0 ,refugees:14 ,seekers: 0.7},
    {year: '2004',internally:25.0 ,refugees:14 ,seekers: 0.7},
    {year: '2005',internally:24.0 ,refugees:13 ,seekers: 0.8},
    {year: '2006',internally:24.0 ,refugees:14 ,seekers: 0.7},
    {year: '2007',internally:26.0 ,refugees:16 ,seekers: 0.7},
    {year: '2008',internally:26.0 ,refugees:15.2 ,seekers: 0.8},
    {year: '2009',internally:27.1 ,refugees:15.2 ,seekers: 1.0},
    {year: '2010',internally:27.5 ,refugees:15.4 ,seekers: 0.8},
    {year: '2011',internally:26.4 ,refugees:15.2 ,seekers: 0.9},
    {year: '2012',internally:28.8 ,refugees:15.4 ,seekers: 0.9},
    {year: '2013',internally:33.3 ,refugees:16.7 ,seekers: 1.2},
    {year: '2014',internally:38.2 ,refugees:19.5 ,seekers: 1.8}
  ];

  var Frame = G2.Frame;
  var frame = new Frame(data); // 加工数据

  frame = Frame.combinColumns(frame, ['internally', 'refugees', 'seekers'], 'count', '难民类型', 'year');
  var chart = new G2.Chart({
    id: 'c1',
    forceFit: true,
    height: 450
  });

  chart.source(frame);
  chart.coord('polar', {inner: 0.1});
  chart.legend('难民类型', {
    position: 'bottom'
  });
  chart.intervalStack().position('year*count')
    .color('难民类型',['rgb(136,186,174)','rgb(184,189,61)','rgb(107,136,138)'])
    .style({
      lineWidth: 1,
      stroke: '#fff'
    });
  chart.render();
</script>


      </body>
    </html>
          
        

南丁格尔玫瑰图

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>南丁格尔玫瑰图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      chart.coord('polar', {inner: 0.1});
        chart.legend('难民类型', {
          position: 'bottom'
        });
        chart.intervalStack().position('year*count')
          .color('难民类型',['rgb(136,186,174)','rgb(184,189,61)','rgb(107,136,138)'])
          .style({
            lineWidth: 1,
            stroke: '#fff'
          });
        chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        var data = [
          {year: '2000',internally:21.0 ,refugees:16 ,seekers: 0.8},
          {year: '2001',internally:25.0 ,refugees:16 ,seekers: 0.8},
          {year: '2002',internally:25.0 ,refugees:15 ,seekers: 0.8},
          {year: '2003',internally:25.0 ,refugees:14 ,seekers: 0.7},
          {year: '2004',internally:25.0 ,refugees:14 ,seekers: 0.7},
          {year: '2005',internally:24.0 ,refugees:13 ,seekers: 0.8},
          {year: '2006',internally:24.0 ,refugees:14 ,seekers: 0.7},
          {year: '2007',internally:26.0 ,refugees:16 ,seekers: 0.7},
          {year: '2008',internally:26.0 ,refugees:15.2 ,seekers: 0.8},
          {year: '2009',internally:27.1 ,refugees:15.2 ,seekers: 1.0},
          {year: '2010',internally:27.5 ,refugees:15.4 ,seekers: 0.8},
          {year: '2011',internally:26.4 ,refugees:15.2 ,seekers: 0.9},
          {year: '2012',internally:28.8 ,refugees:15.4 ,seekers: 0.9},
          {year: '2013',internally:33.3 ,refugees:16.7 ,seekers: 1.2},
          {year: '2014',internally:38.2 ,refugees:19.5 ,seekers: 1.8}
        ];

var Frame = G2.Frame;
        var frame = new Frame(data); // 加工数据

frame = Frame.combinColumns(frame, ['internally', 'refugees', 'seekers'], 'count', '难民类型', 'year');

return {
          data: frame,
          forceFit: true,
          width: 500,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>