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>
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 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',
  forceFit: true,
  height: 450
});
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)又称“枝叶图”，它的思路是将数组中的数按位数进行比较，将数的大小基本不变或变化不大的位作为一个主干（茎），将变化大的位的数作为分枝（叶），列在主干的后面，这样就可以清楚地看到每个主干后面的几个数，每个数具体是多少。了解更多

<!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 Util = G2.Util;
      const Stat = G2.Stat;
      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();
    });

const MyComponent = React.createClass({
      getInitialState() {
        const 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},];
        function statStemLeafData(data, num) {
          let str;
          let 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;
        }
        return {
          data: statStemLeafData(data, 1),
          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>