AntV快速入手

注意事项:

1.antV的引入方式
2.使用前的基本要素
3.使用的注意点

 


引入方式

1.<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7-beta.4/dist/g2.min.js"></script>   外链式引入

externals:{

'g2':'g2'

}

import G2 from 'g2'

2.npm install @antv/g2 --save 或者  import G2 from '@antv/g2'


 使用基本要素

html部分

<div id="c1"></div>

 js部分

1.创建 Chart 图表对象,指定图表所在的容器 ID、指定图表的宽高、边距等信息;

2.载入图表数据源;

3.使用图形语法进行图表的绘制;

4.渲染图表;

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象
const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
})
// Step 2: 载入数据源
chart.source(data);
// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();

 几何图形(Geom)

所谓的几何图形就是最后用chart对象生成怎样的图表,像上述interval就是生成直线统计图,除此以外还有好几种,这里直接上官网截图

 

geom对象

使用生成对应的几何图后,返回的是geom对象,这个对象有一些方法去定义图标的一些属性(官方详细介绍https://antv.alipay.com/zh-cn/g2/3.x/tutorial/attr.html)和方法

这里的方法我们只提tooltip和label

上边的别名是给坐标轴取的名字

而chart的tooltip方法这里我直接丢官方链接,因为内容比较多,反正官网的最好: https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_tooltip
*****使用tooltip的时候要分清楚是chart对象所拥有的还是geom对象拥有的,两者不可混合,坐标轴的设置有多种形式,你还可以用axis方法专门设置

重绘我就放一些基本够用的示例代码

  // chart.clear()  ----我也不知道放在哪里,感觉没什么差别
  chart.source(newData)
  chart.repaint()
  chart.interval().position('genre*sold').color('genre')
  chart.render() 

上面的内容已经足够基本的一个需求使用了

我根据自己的基本需求画出了基本的图,还有最常用的饼图基本同上
如果还有更多精美的要求,请查询官网G2,希望对你有帮助

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值