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
        {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"actual":270,"target":250},
14
        {"title":"Profit","subtitle":"%","ranges":[20,25,30],"actual":23,"target":26},
15
        {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"actual":100,"target":550},
16
        {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"actual":1650,"target":2100},
17
        {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"actual":3.2,"target":4.4}
18
      ];
19
      var chart = new G2.Chart({
20
        id: 'c1',
21
        forceFit: true,
22
        height: 450,
23
        plotCfg: {
24
          margin: [100, 150]
25
        }
26
      });
27
      chart.legend(false); // 不展示图例
28
      var y = 0;
29
      var yGap = 0.1;
30
      for(var i=0, l = data.length; i < l; i++) {
31
        var ranges = data[i].ranges;
32
        var view = chart.createView({
33
          index: i,
34
          start: {
35
            x: 0,
36
            y: y
37
          },
38
          end: {
39
            x: 1,
40
            y: y + yGap
41
          }
42
        });
43
        view.source([data[i]], {
44
          actual: {
45
            min: 0,
46
            max: ranges[2],
47
            nice: false
48
          },
49
          target: {
50
            min: 0,
51
            max: ranges[2],
52
            nice: false
53
          }
54
        });
55
        view.coord().transpose();
56
        view.axis('target', false);
57
        view.axis('actual', {
58
          position: 'right',
59
          title: null
60
        });
61
        view.axis('title', {
62
          title: null
63
        });
64
        view.point().position('title*target').color('#5b0101').shape('line').size(12).style({
65
          lineWidth: 2
66
        });
67
        view.interval().position('title*actual').color('#5b0101').size(15);
68
        view.guide().rect([-1, 0], [1, ranges[0]], {
69
          fill: '#e96e33',
70
          fillOpacity: 0.5
71
        });
72
        view.guide().rect([-1, ranges[0]], [1, ranges[1]], {
73
          fill: '#f9ca47',
74
          fillOpacity: 0.5
75
        });
76
        view.guide().rect([-1, ranges[1]], [1, ranges[2]], {
77
          fill: '#88bb34',
78
          fillOpacity: 0.5
79
        });
80
        y += yGap + 0.125;
81
      }
82
      chart.render();
83
    </script>
84
  </body>
85
</html>
86
​

子弹图

子弹图通过线性表达方式展示单一数据源各阶段精确的数据信息、某项数据与不同目标的校对结果等。