G2-mobile - 玉玦图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>玉玦图</title>
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
      </head>
      <body>
          <div style="width:416px;height:218px;margin:0 auto">
              <canvas id="c1" style="width:416px;height:218px;"></canvas>
          </div>
 <script>
GM.Global.pixelRatio = 2;
var data = [
    {"tem":7,"city":"tokyo"},
    {"tem":4,"city":"newYork"},
    {"tem":3,"city":"berlin"}
  ];

var chart = new GM.Chart({
  id: 'c1'
});

chart.source(data, {
    tem: {
      min: 0,
      max: 10
    }
});

chart.axis(false);

chart.coord('polar',{
  transposed: true,
  inner: 0.5
});

chart.interval().position('city*tem').color('city');
chart.render();
</script>
      </body>
    </html>
          
        

玉玦图

玉玦图（又名，环形柱状图），是柱状图关于笛卡尔坐标系转换到极坐标系的仿射变换。其意义和用法与柱状图类似。了解更多