美文网首页vue相关
antV使用快速上手

antV使用快速上手

作者: 9d0edee7bcb0 | 来源:发表于2018-08-08 08:31 被阅读0次

    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>


      image.png
      image.png

      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就是生成直线统计图,除这以外,
    还有好几种,这里直接上官网截图


    image.png

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

    image.png
    这里的方法我们只提tooltip和label
    image.png
    image.png
    *上面的别名是给坐标轴取名字 image.png
    而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() 
    

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


    image.png

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

    相关文章

      网友评论

        本文标题:antV使用快速上手

        本文链接:https://www.haomeiwen.com/subject/mvxtbftx.html