G2 - The Grammar Of Graphics

其他图表 / 茎叶图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>茎叶图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
function statStemLeafData(data, num) {
  var str;
  var stem;
  data.sort(function(a, b){
    return a.v-b.v;
  });
  Util.each(data, function(object){
    str = object.v.toString();
    stem = str.substr(0, str.length - num);
    object.stem = stem ? stem : '0';
    object.leaf = str.substr(str.length - num, str.length);
  });
  return data;
}
var Frame = G2.Frame;
var Util = G2.Util;
var Stat = G2.Stat;
var data = [{v: 2},{v: 8},{v: 12},{v: 13},{v: 17},{v: 19},{v: 22},{v: 24},{v: 29},{v: 31},{v: 31},{v: 31},{v: 36},{v: 35},{v: 39},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 42},{v: 42},{v: 42},{v: 43},{v: 43},{v: 49},{v: 53},{v: 53},{v: 53},{v: 53},{v: 63},{v: 63},{v: 63},{v: 66},{v: 65},{v: 69},{v: 71},{v: 71},{v: 72},{v: 76},{v: 75},{v: 77},];
var str;
var stem;
var chart;
data = statStemLeafData(data, 1);
chart = new G2.Chart({
  id : 'c1',
  width : 1000,
  height : 500
});
chart.source(data);
chart.axis('leaf', false);
chart.axis('stem', {
  titleOffset: 50,
  grid: null
});
chart.pointStack().position('stem').size(8)
  .label('leaf', {
    offset: 0
  })
  .tooltip('v')
  .style({
    stroke: null,
    fill: null
  });
chart.render();
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
function statStemLeafData(data, num) {
  var str;
  var stem;
  data.sort(function(a, b){
    return a.v-b.v;
  });
  Util.each(data, function(object){
    str = object.v.toString();
    stem = str.substr(0, str.length - num);
    object.stem = stem ? stem : '0';
    object.leaf = str.substr(str.length - num, str.length);
  });
  return data;
}
var Frame = G2.Frame;
var Util = G2.Util;
var Stat = G2.Stat;
var data = [{v: 2},{v: 8},{v: 12},{v: 13},{v: 17},{v: 19},{v: 22},{v: 24},{v: 29},{v: 31},{v: 31},{v: 31},{v: 36},{v: 35},{v: 39},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 41},{v: 49},{v: 42},{v: 42},{v: 42},{v: 43},{v: 43},{v: 49},{v: 53},{v: 53},{v: 53},{v: 53},{v: 63},{v: 63},{v: 63},{v: 66},{v: 65},{v: 69},{v: 71},{v: 71},{v: 72},{v: 76},{v: 75},{v: 77},];
var str;
var stem;
var chart;
data = statStemLeafData(data, 1);
chart = new G2.Chart({
  id : 'c1',
  width : 1000,
  height : 500
});
chart.source(data);
chart.axis('leaf', false);
chart.axis('stem', {
  titleOffset: 50,
  grid: null
});
chart.pointStack().position('stem').size(8)
  .label('leaf', {
    offset: 0
  })
  .tooltip('v')
  .style({
    stroke: null,
    fill: null
  });
chart.render();
</script>

</body>
  </html>

茎叶图

茎叶图（Stem-and-Leaf display)又称“枝叶图”，它的思路是将数组中的数按位数进行比较，将数的大小基本不变或变化不大的位作为一个主干（茎），将变化大的位的数作为分枝（叶），列在主干的后面，这样就可以清楚地看到每个主干后面的几个数，每个数具体是多少。了解更多