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 = [{"age":"5","gender":"女性","mean":101,"lower":93,"upper":109},{"age":"10","gender":"女性","mean":120,"lower":110,"upper":124},{"age":"15","gender":"女性","mean":150,"lower":134,"upper":165},{"age":"20","gender":"女性","mean":167,"lower":151.6,"upper":178},{"age":"25","gender":"女性","mean":175,"lower":156.7,"upper":181},{"age":"30","gender":"女性","mean":175,"lower":160,"upper":181},{"age":"35","gender":"女性","mean":173,"lower":156,"upper":181},{"age":"40","gender":"女性","mean":170,"lower":152,"upper":173},{"age":"45","gender":"女性","mean":170,"lower":154,"upper":176},{"age":"50","gender":"女性","mean":163,"lower":149,"upper":166},{"age":"5","gender":"男性","mean":104,"lower":101,"upper":111},{"age":"10","gender":"男性","mean":130,"lower":120,"upper":134},{"age":"15","gender":"男性","mean":165,"lower":149,"upper":180},{"age":"20","gender":"男性","mean":178,"lower":152.6,"upper":193},{"age":"25","gender":"男性","mean":185,"lower":166.7,"upper":194},{"age":"30","gender":"男性","mean":183,"lower":158,"upper":189},{"age":"35","gender":"男性","mean":182,"lower":165,"upper":192},{"age":"40","gender":"男性","mean":180,"lower":172,"upper":190},{"age":"45","gender":"男性","mean":182,"lower":166,"upper":188},{"age":"50","gender":"男性","mean":177,"lower":163,"upper":192}];
13
      var chart = new G2.Chart({
14
        id : 'c1',
15
        forceFit: true,
16
        height: 450
17
      });
18
      chart.source(data, {
19
        mean: {
20
          min: 0,
21
          tickInterval: 50,
22
          alias: '身高'
23
        },
24
        'lower+upper': {
25
          min: 0
26
        }
27
      });
28
      chart.axis('lower+upper', false);
29
      chart.intervalDodge().position('age*mean').color('gender', function(val) {
30
        if (val === '男性') {
31
          return '#64b5f6';
32
        }
33
        return '#ff9999';
34
      }).size(16);
35
      chart.intervalDodge().position('age*(lower+upper)').color('#ef6c00').shape('gender', function() {
36
        return 'tick'
37
      }).size(8);
38
      chart.render();
39
      chart.on('tooltipchange', function(ev) {
40
        var items = ev.items; // tooltip显示的项
41
        var femaleName = items[0].name;
42
        var femaleMean = items[0].value;
43
        var femaleRange = (items[2].value).split('-');
44
        var femaleColor = items[0].color;
45
        var maleName = items[1].name;
46
        var maleMean = items[1].value;
47
        var maleRange = (items[3].value).split('-');
48
        var maleColor = items[1].color;
49
        items.splice(0); // 清空
50
        items.push({
51
          title: null,
52
          name: femaleName,
53
          marker: true,
54
          color: femaleColor,
55
          value: femaleRange[0] + ' cm < ' + femaleMean + ' cm < ' + femaleRange[1] + ' cm'
56
        });
57
        items.push({
58
          title: null,
59
          name: maleName,
60
          marker: true,
61
          color: maleColor,
62
          value: maleRange[0] + ' cm < ' + maleMean + ' cm < ' + maleRange[1] + ' cm'
63
        });
64
      });
65
    </script>
66
  </body>
67
</html>
68
​

钉形柱状图

实心的柱子标识不同性别的平均身高，而工字型柱子标识了不同性别的身高范围。