学习
实践
活动
工具
TVP
写文章
专栏首页柠檬先生G2 基本使用 折线图 柱状图 饼图 基本配置

G2 基本使用 折线图 柱状图 饼图 基本配置

G2的基本使用

  1.浏览器引入 <!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

2.通过 npm 安装 npm install @antv/g2 --save

  3.创建 div 图表容器 <div id="c1"></div>

  4. 编写图表绘制代码

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

    (2)载入图表数据源;

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

    (4)渲染图表。(这部分代码用 <script></script>,可以放在页面代码的任意位置(最好的做法是放在 </body> 之前))

  5示例:

    (1)折线图(单线)

 <body>

        <div id="appearance"></div>

        <script>

           var data = [{year: '1991', value: 3}, {year: '1992', value: 4}, {year: '1993', value: 3.5}, {           // 数据格式
                year: '1994', value: 5}, {year: '1995', value: 4.9}, {year: '1996', value: 6}, {year: '1997',                                                              
                value: 7}, {year: '1998', value: 9}, {year: '1999', value: 13}];
            var chart = new G2.Chart({
                container: 'appearance', // 指定 图表容器ID
                forceFit: true,    // 是否自动缩放
                height: 500,  // 图表的高度
            });
            chart.source(data);   // 载入数据源
            chart.scale('value', {    // 度量
                min: 0  // Y轴显示的最小值
            });
            chart.scale('year', {  // 度量
                range: [0, 1]      // 数值范围区间
            });
            chart.tooltip({ // 提示信息
                crosshairs: { 
                    type: 'line' // 提示信息类型
                }
            });
            chart.line().position('year*value');   // 几何标记类型   线,  position:二维坐标系内设至 x轴 y轴
            chart.point().position('year*value').size(4).shape('circle').style({  // 几何标记类型   点,  二维坐标系内设置 x轴 y轴    大小   图形形状
                stroke: '#fff',
                lineWidth: 1
            });
            chart.render();  // 渲染
      </script>
     </body>
     
    (2)折线图(双线)
      <div id="appearance"></div>
      <script>
        // 在一行中保存多个城市的数据,需要将数据转换成
        // {month: 'Jan', city: 'Tokyo', temperature: 3.9}
        var data = [{month: 'Jan', Tokyo: 7.0, London: 3.9}, {month: 'Feb', Tokyo: 6.9, London: 4.2}, {
            month: 'Mar', Tokyo: 9.5, London: 5.7}, {month: 'Apr', Tokyo: 14.5, London: 8.5}, {month: 'May',
            Tokyo: 18.4, London: 11.9}, {month: 'Jun', Tokyo: 21.5, London: 15.2}, {month: 'Jul', Tokyo: 25.2,
            London: 17.0}, {month: 'Aug', Tokyo: 26.5, London: 16.6}, {month: 'Sep', Tokyo: 23.3, London: 14.2
            }, {month: 'Oct', Tokyo: 18.3, London: 10.3}, {month: 'Nov', Tokyo: 13.9, London: 6.6}, {month: 'Dec',
            Tokyo: 9.6, London: 4.8}];
        var ds = new DataSet(); // 创建DataSet 对象
        var dv = ds.createView().source(data);// 创建数据实例
          // fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可
        dv.transform({
            type: 'fold',
            fields: ['Tokyo', 'London'], // 展开字段集
            key: 'city', // key字段
            value: 'temperature' // value字段
        });
        var chart = new G2.Chart({
            container: 'appearance',
            forceFit: true,
            height: 500
        });
        chart.source(dv, {
            month: {
                range: [0, 1]
            }
        });
        chart.tooltip({
            crosshairs: {
                type: 'line'
            }
        });
        chart.axis('temperature', {
          label: {
              formatter: function formatter(val) { // 格式化
                  return val + '°C';
                }
            }
        });
        chart.line().position('month*temperature').color('city').shape('smooth');
        chart.point().position('month*temperature').color('city').size(4).shape('circle').style({
            stroke: '#fff',
            lineWidth: 1
        });
        chart.render();
      </script>
    (3)折线图(多线)
<script>
    var data = [{date: '2018/8/1', type: 'download', value: 4623}, {date: '2018/8/1', type: 'register', value: 2208}, {
        date: '2018/8/1', type: 'bill', value: 182}, {date: '2018/8/2', type: 'download', value: 6145}, {date: '2018/8/2',
        type: 'register', value: 2016}, {date: '2018/8/2', type: 'bill', value: 257}, {date: '2018/8/3', type: 'download',
        value: 508}, {date: '2018/8/3', type: 'register', value: 2916}, {date: '2018/8/3', type: 'bill', value: 289}, {
        date: '2018/8/4', type: 'download', value: 6268}, {date: '2018/8/4', type: 'register', value: 4512}, {date: '2018/8/4',
        type: 'bill', value: 428}, {date: '2018/8/5', type: 'download', value: 6411}, {date: '2018/8/5', type: 'register',
        value: 8281}, {date: '2018/8/5', type: 'bill', value: 619}, {date: '2018/8/6', type: 'download', value: 1890}, {
        date: '2018/8/6', type: 'register', value: 2008}, {date: '2018/8/6', type: 'bill', value: 87}, {date: '2018/8/7',
        type: 'download', value: 4251}, {date: '2018/8/7', type: 'register', value: 1963}, {date: '2018/8/7', type: 'bill',
        value: 706}, {date: '2018/8/8', type: 'download', value: 2978}, {date: '2018/8/8', type: 'register', value: 2367}, {
        date: '2018/8/8', type: 'bill', value: 387}, {date: '2018/8/9', type: 'download', value: 3880}, {date: '2018/8/9',
        type: 'register', value: 2956}, {date: '2018/8/9', type: 'bill', value: 488}, {date: '2018/8/10', type: 'download',
        value: 3606}, {date: '2018/8/10', type: 'register', value: 678}, {date: '2018/8/10', type: 'bill', value: 507}, {
        date: '2018/8/11', type: 'download', value: 4311}, {date: '2018/8/11', type: 'register', value: 3188}, {date: '2018/8/11',
        type: 'bill', value: 548}, {date: '2018/8/12', type: 'download', value: 4116}, {date: '2018/8/12', type: 'register',
        value: 3491}, {date: '2018/8/12', type: 'bill', value: 456}, {date: '2018/8/13', type: 'download', value: 6419}, {
        date: '2018/8/13', type: 'register', value: 2852}, {date: '2018/8/13', type: 'bill', value: 689}, {date: '2018/8/14',
        type: 'download', value: 1643}, {date: '2018/8/14', type: 'register', value: 4788}, {date: '2018/8/14', type: 'bill',
        value: 280}, {date: '2018/8/15', type: 'download', value: 445}, {date: '2018/8/15', type: 'register', value: 4319}, {
        date: '2018/8/15', type: 'bill', value: 176}];
    var chart = new G2.Chart({
        container: 'appearance',
        forceFit: true,
        height: 500,
        padding: [100, 20, 30, 45] // 上右下左
    });
    chart.source(data);
    chart.tooltip({// 提示信息
        follow: true,
        crosshairs: 'y',
    });
    chart.source(data, {
        'date': {// 显示的条数
            tickCount: 15
        }
    });
    chart.axis('date', {// 坐标轴
        label: {
            textStyle: {
                fill: '#aaaaaa'
            }
        }
    });
    chart.axis('value', {
        label: {
            textStyle: {
                fill: '#aaaaaa'
            },
            formatter: function formatter(text) {// 格式化参数值
                return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            }
        }
    });
    chart.legend(false);// 图例禁用
    chart.line().position('date*value').color('type');
    chart.render();
</script>
(4)基础柱状图
<div id="appearance"></div>
<script>
    var data = [{year: '1951 年', sales: 38}, {year: '1952 年', sales: 52}, {year: '1956 年',
        sales: 61}, {year: '1957 年',  sales: 145}, {year: '1958 年', sales: 48}, {year: '1959 年',
        sales: 38}, {year: '1960 年', sales: 38}, {year: '1962 年', sales: 38}];
    var chart = new G2.Chart({
        container: 'appearance',
        forceFit: true,
        height: window.innerHeight
    });
    chart.source(data);
    chart.scale('sales', {
        tickInterval: 20  // 用于指定坐标轴各个标度点的距离
    });
    chart.interval().position('year*sales');
    chart.render();
</script>
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.cnblogs.com/nmxs复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Android——MPAndroidChart折线图/柱状图/饼形图的使用

    【背景】:项目中需要使用到图表,于是找了目前非常热门的开源图表,折线图/柱状图/饼图等应有尽有,各种效果实现都很给力,附上github链接,有原DEMO,git...

    Winter_world
  • 一款无需写任何代码,即可一键生成前后端代码的开源工具

    JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发。JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式->...

    测试开发社区
  • jeecg-boot

    Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Desi...

    凯哥Java
  • 数据可视化:基本图表

    "数据可视化"可以帮助用户理解数据,一直是热门方向。 图表是"数据可视化"的常用手段,其中又以基本图表----柱状图、折线图、饼图等等----最为常用。 ? 用...

    ruanyf
  • 【知识】六种基本图表的特点和适用场合

    1 为什么要用数据可视化? 2 如何做数据可视化? "数据可视化"可以帮助用户理解数据,一直是热门方向。 图表是”数据可视化”的常用手段,其中又以基本图表—-...

    陆勤_数据人网
  • 人人都会用到的数据可视化之常用图表类型

    文章介绍 “数据可视化”可以帮助用户理解数据,一直是热门方向。 图表是”数据可视化”的常用手段,其中又以基本图表——柱状图、折线图、饼图等等最为常用。 ? 用...

    灯塔大数据
  • 人人都会用到的数据可视化之常用图表类型

    图表是”数据可视化”的常用手段,其中又以基本图表——柱状图、折线图、饼图等等最为常用。

    华章科技
  • 更高级的数据可视化,使用pyecharts制作精美图表

    提到用python进行数据可视化,那么大多数人选择都是matplotlib,但是生成的图表不能进行交互操作,比如时间轴拖动、交互式图例等,那么本文将对pyech...

    刘早起
  • Jeecg-Boot 快速开发平台

    一款基于代码生成器的JAVA快速开发平台!全新架构前后端分离:SpringBoot 2.x,Ant Design&Vue&,Mybatis,Shiro,JWT。...

    程序源代码
  • Pandas知识点-绘制统计图

    使用matplotlib可以绘制各种各样的统计图,Pandas对matplotlib中的绘图方法进行了更高层的封装,使用起来更简单方便。

    Python碎片公众号
  • Python数据可视化 pyecharts实现各种统计图表过程详解

    Echarts是一款由百度公司开发的开源数据可视化JS库,pyecharts是一款使用python调用echarts生成数据可视化的类库,可实现柱状图,折线图,...

    matinal
  • 更高级的数据可视化,使用pyecharts制作精美图表

    提到用python进行数据可视化,那么大多数人选择都是matplotlib,但是生成的图表不能进行交互操作,比如时间轴拖动、交互式图例等,那么本文将对pyech...

    极简小课
  • 报表系统练手(1) -- 分析数据模型

    {name: '北京市', time: '2017-03-31 00:00:00', 气温:'5℃'}

    用户7293182
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    项目地址:https://github.com/zhangdaiscott/jeecg-boot

    Java架构师必看
  • 超赞,20个炫酷的数据可视化大屏(含源码)

    可视化大屏不再只是电影里奇幻的画面,而是被实实在在地应用在政府、商业、金融、制造等各个行业的业务场景中,切切实实地实现着大数据的价值。

    小F
  • 精选30个炫酷的数据可视化大屏(含源码),拿走就用!

    “大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。

    小F
  • GitHub 近两万 Star,无需编码,可一键生成前后端代码,这个开源项目有点强!

    JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,My...

    程序员追风
  • 手摸手告诉 UI 妹子数据可视化 20 条优化细则【切图仔直接收藏】

    小序:做数据可视化的时候,很多时候 UI 妹纸非得自己搞一套设计,可是明明前端图表库已经设定好是这样这样,她非得那样那样;所以,为难咱前端切图仔,必须得掌握点理...

    掘金安东尼
  • 干货|全网最新最全Pyecharts可视化教程(一)

    数据可视化能够更加直观的将数据的趋势展现出来,而绝大数人对于数据可视化的选择要么是matplotlib或者是seaborn,本文将从比较热门的可视化模块pyec...

    用户6888863

扫码关注腾讯云开发者

领取腾讯云代金券