分组柱状图 | 数据可视化 | G2 图表库 - 常规

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>分组柱状图 | G2 图表库</title>
  </head>
  <body>
    <div id="container" />
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.8/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
    <script>
      const data = [
        { name: 'London', mounth: 'Jan.', number: 18.9 },
        { name: 'London', mounth: 'Feb.', number: 28.8 },
        { name: 'London', mounth: 'Mar.', number: 39.3 },
        { name: 'London', mounth: 'Apr.', number: 81.4 },
        { name: 'London', mounth: 'May', number: 47 },
        { name: 'London', mounth: 'Jun.', number: 20.3 },
        { name: 'London', mounth: 'Jul.', number: 24 },
        { name: 'London', mounth: 'Aug.', number: 35.6 },
        { name: 'Berlin', mounth: 'Jan.', number: 12.4 },
        { name: 'Berlin', mounth: 'Feb.', number: 23.2 },
        { name: 'Berlin', mounth: 'Mar.', number: 34.5 },
        { name: 'Berlin', mounth: 'Apr.', number: 99.7 },
        { name: 'Berlin', mounth: 'May', number: 52.6 },
        { name: 'Berlin', mounth: 'Jun.', number: 35.5 },
        { name: 'Berlin', mounth: 'Jul.', number: 37.4 },
        { name: 'Berlin', mounth: 'Aug.', number: 42.4 },
      ];
<pre><code>  const chart = new Chart({
    container: 'container',
    autoFit: true,
    height: 500,
  });

  chart.data(data);
  chart.scale('number', {
    nice: true,
  });
  chart.tooltip({
    showMarkers: false,
    shared: true,
  });
  chart.legend('mounth',{
    itemName:{
      style:{
        // color:
      }
    }
  })

  chart
    .interval()
    .position('mounth*number')
    .color('name')
    .adjust([
      {
        type: 'dodge',
        marginRatio: 0,
      },
    ]);

  chart.interaction('active-region');

  data.forEach((item) =&gt; {
    chart
      .annotation()
      .text({
        position: [item.name, item.mounth],
        content: item.number,
        style: {
          textAlign: 'center',
          color: 'red',
        },
        offsetY: -12,
      });
  });

  chart.render();
&lt;/script&gt;
</code></pre>
  </body>
</html>