G2 - Aster plot

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Aster plot</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 = [{"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}];

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});

chart.source(data);
chart.coord('polar', {
  inner: 0.2
});
chart.legend(false);
chart.axis('score', false);
chart.axis('label', {
  labels: null
});
chart.interval().position('label*score').color('colour', function(val) {
  return val;
}).style({
  stroke: '#999',
  lineWidth: 1
}).tooltip('score');
chart.render();
</script>


      </body>
    </html>
          

Aster plot

极坐标下的柱状图。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Aster plot</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.2
      });
      chart.legend(false);
      chart.axis('score', false);
      chart.axis('label', {
        labels: null
      });
      chart.interval().position('label*score').color('colour', function(val) {
        return val;
      }).style({
        stroke: '#999',
        lineWidth: 1
      }).tooltip('score');
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          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}
          ],
          forceFit: true,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>