antv G2柱状图

一、首先需要引用antv-g2.
1.直接在html引用外部js文件,<script src=’‘相对路径’’>
2.如果是vue,需要安装 npm install @antv/g2 --save 但是在vscode安装后,按照提示修复一下就行了

二、初始化柱状体表格

const chart=new Chart({
      container:'attendanceChartDiv', //初始化的div ID 
      width:373, //跨度可以自适应 autoFit设置为true就可以了
      height:220, //高度无法自适应只能设置固定值
      padding: [30, 10, 30, 40]  //图标间距
    });

三、加载初始化数据

chart.legend(false);
    chart
    .interval()
    .position('A*B') //*左侧是柱状图x左边显示的名字,右侧是柱状体数量
    ]);

    chart.render();    

这个是简单的加载,实际还有好多的方法和样式可以去设置,这个需要大家去自己研究了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值