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 = [
  {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"actual":270,"target":250},
  {"title":"Profit","subtitle":"%","ranges":[20,25,30],"actual":23,"target":26},
  {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"actual":100,"target":550},
  {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"actual":1650,"target":2100},
  {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"actual":3.2,"target":4.4}
];

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450,
  plotCfg: {
    margin: [100, 150]
  }
});
chart.legend(false); // 不展示图例

var y = 0;
var yGap = 0.1;
for(var i=0, l = data.length; i < l; i++) {
  var ranges = data[i].ranges;
  var view = chart.createView({
    index: i,
    start: {
      x: 0,
      y: y
    },
    end: {
      x: 1,
      y: y + yGap
    }
  });
  view.source([data[i]], {
    actual: {
      min: 0,
      max: ranges[2],
      nice: false
    },
    target: {
      min: 0,
      max: ranges[2],
      nice: false
    }
  });
  view.coord().transpose();
  view.axis('target', false);
  view.axis('actual', {
    position: 'right',
    title: null
  });
  view.axis('title', {
    title: null
  });
  view.point().position('title*target').color('#5b0101').shape('line').size(12).style({
    lineWidth: 2
  });
  view.interval().position('title*actual').color('#5b0101').size(15);
  view.guide().rect([-1, 0], [1, ranges[0]], {
    fill: '#e96e33',
    fillOpacity: 0.5

  });
  view.guide().rect([-1, ranges[0]], [1, ranges[1]], {
    fill: '#f9ca47',
    fillOpacity: 0.5
  });
  view.guide().rect([-1, ranges[1]], [1, ranges[2]], {
    fill: '#88bb34',
    fillOpacity: 0.5

  });
  y += yGap + 0.125;
}

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 => {
      const data = [
        {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"actual":270,"target":250},
        {"title":"Profit","subtitle":"%","ranges":[20,25,30],"actual":23,"target":26},
        {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"actual":100,"target":550},
        {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"actual":1650,"target":2100},
        {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"actual":3.2,"target":4.4}
      ];

chart.legend(false); // 不展示图例

var y = 0;
      var yGap = 0.1;
      for(var i=0, l = data.length; i < l; i++) {
        var ranges = data[i].ranges;
        var view = chart.createView({
          index: i,
          start: {
            x: 0,
            y: y
          },
          end: {
            x: 1,
            y: y + yGap
          }
        });
        view.source([data[i]], {
          actual: {
            min: 0,
            max: ranges[2],
            nice: false
          },
          target: {
            min: 0,
            max: ranges[2],
            nice: false
          }
        });
        view.coord().transpose();
        view.axis('target', false);
        view.axis('actual', {
          position: 'right',
          title: null
        });
        view.axis('title', {
          title: null
        });
        view.point().position('title*target').color('#5b0101').shape('line').size(12).style({
          lineWidth: 2
        });
        view.interval().position('title*actual').color('#5b0101').size(15);
        view.guide().rect([-1, 0], [1, ranges[0]], {
          fill: '#e96e33',
          fillOpacity: 0.5

});
        view.guide().rect([-1, ranges[0]], [1, ranges[1]], {
          fill: '#f9ca47',
          fillOpacity: 0.5
        });
        view.guide().rect([-1, ranges[1]], [1, ranges[2]], {
          fill: '#88bb34',
          fillOpacity: 0.5

});
        y += yGap + 0.125;
      }

chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [],
          forceFit: true,
          width: 500,
          height: 450,
          plotCfg: {
            margin: [100, 150]
          },
        };
      },
      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>