AntV G2堆叠柱状图网格线实线

最新推荐文章于 2023-06-19 11:07:48 发布

婷小医仙

最新推荐文章于 2023-06-19 11:07:48 发布

阅读量1.7k

点赞数

分类专栏： G2 AntV 文章标签： html css3

本文链接：https://blog.csdn.net/qq_44828153/article/details/109470840

版权

G2 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

AntV

1 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>极坐标下的层叠柱状图</title>
          </head>
          <body>
            <div id="container" />
            <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.11/dist/g2.min.js"></script>
            <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.2/dist/data-set.min.js"></script>
            <script>
            const data = [
      { year: '2000', '类型 A': 21.0, '类型 B': 16, '类型 C': 8 },
      { year: '2001', '类型 A': 25.0, '类型 B': 16, '类型 C': 8 },
      { year: '2002', '类型 A': 25.0, '类型 B': 15, '类型 C': 8 },
      { year: '2003', '类型 A': 25.0, '类型 B': 14, '类型 C': 7 },
      { year: '2004', '类型 A': 25.0, '类型 B': 14, '类型 C': 7 },
      { year: '2005', '类型 A': 24.0, '类型 B': 13, '类型 C': 8 },
      { year: '2006', '类型 A': 24.0, '类型 B': 14, '类型 C': 7 },
      { year: '2007', '类型 A': 26.0, '类型 B': 16, '类型 C': 7 },
      { year: '2008', '类型 A': 26.0, '类型 B': 15.2, '类型 C': 8 },
      { year: '2009', '类型 A': 27.1, '类型 B': 15.2, '类型 C': 10 },
      { year: '2010', '类型 A': 27.5, '类型 B': 15.4, '类型 C': 8 },
      { year: '2011', '类型 A': 26.4, '类型 B': 15.2, '类型 C': 9 },
      { year: '2012', '类型 A': 28.8, '类型 B': 15.4, '类型 C': 9 },
      { year: '2013', '类型 A': 33.3, '类型 B': 16.7, '类型 C': 12 },
      { year: '2014', '类型 A': 38.2, '类型 B': 19.5, '类型 C': 18 }
    ];
    const { DataView } = DataSet;
    const dv = new DataView();
    dv.source(data)
      .transform({
        type: 'fold',
        fields: [ '类型 A', '类型 B', '类型 C' ],
        key: '难民类型',
        value: 'count',
        remains: 'year',

      });

    const chart = new G2.Chart({
      container: 'container',
      forceFit: true,
      height: 500,
      padding: 'auto'
    });
    chart.source(dv);
    chart.coord('polar', { inner: 0.1 });
    chart.legend('value', {
      position: 'bottom'
    });
    chart.axis('count', {
      grid: {
        lineStyle: {
          stroke: 'yellow',
          lineWidth: 1,
          lineDash: [ 0, 0 ]
        },
      }
    });

    chart.intervalStack()
      .position('year*count')
      .color('难民类型')
      .style({
        lineWidth: 1,
        stroke: 'red'
      });
    chart.render();
            </script>
          </body>
        </html>

主要代码：

chart.axis('count', {
grid: {
lineStyle: {
stroke: 'yellow',
lineWidth: 1,
lineDash: [ 0, 0 ]
},
}
});

官方文档：https://g2-v3.antv.vision/zh/examples/column/stack#polar-stack

婷小医仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AntV G2堆叠柱状图网格线实线

代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>极坐标下的层叠柱状图</title> </head> <body> <div id="container" /> ..
复制链接

扫一扫