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/p/10760610.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值