G2折线图

angular7使用G2折线图

  • 安装依赖
  • 单折线
  • 多折线图
  • 动态数据
  • 结语

安装依赖

antv G2(官方资料)提供了多种安装方式, 这里使用npm添加依赖

npm install @antv/g2 --save

当前版本3.5.2

单折线

~/app/t 文件夹中创建组件 ChartComponent

$ ng generate component t/chart
或
$ ng g c t/chart

引入G2

import * as G2 from '@antv/g2';

在初始化ngOnInit()中构建

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
	constructor(){}
	ngOnInit() {
		// 创建图表对象
		const chart = new G2.Chart({
			container: 'EL-ID',	// 用于绘图的容器, [EL-ID] -- HTML标签ID属性
			forceFit: true,     // 图表的宽度自适应开关, 设置为 true 时表示自动取 dom(实例容器)的宽度。
		});
		// 图表数据
		const data = [
	      {x: '1993', y: 23.5},
	      {x: '1994', y: 5},
	      {x: '1995', y: 4.9},
	      {x: '1996', y: 6},
	      {x: '1997', y: 7},
	      {x: '1998', y: 9},
	      {x: '1999', y: 13}
     	};
    	// 设置数据源
    	chart.source(data);
    	// 设置提示
    	chart.tooltips({
    		crosshairs: {
    			// rect 	表示矩形框,
    			// x 		表示水平辅助线,
    			// y|line  	【默认】表示垂直辅助线
    			// cross 	表示十字辅助线
    			type:'line'
    		}
    	});
    	
    	// 线条作色(画线条)
    	chart.line()
    		// 线条走势, 默认为直线
    		// geom.position('属性x*属性y'), 属性x会映射到X轴, 属性2会映射到Y轴
    		// 也可以传入数组方式 geam.position(['x', 'y'])
    		.position('x*y');
    	
    	// 点作色(画点)
    	// 注意 point() 方法返回的是 Geom 对象. 不是 Chart 对象
    	chart.point()	
	    	// 作色坐标为x*y, x-x轴, y-Y轴
	    	// 这里的坐标系需要与 chart.line().position() 坐标系一致
	    	// 如果写错(y*x)计算结果将不正确
    		.position('x*y')	
    		// point 图形的 size 影响点的半径大小
			// line, area, path 中的 size 影响线的粗细
			// interval 的 size 影响柱状图的宽度
    		.size(4)		
    		// 不同类型支持不同形状, 具体查看 https://www.yuque.com/antv/g2-docs/api-geom#lg9tks	
    		.shape('circle')
    		// 设置当前形状样式
    		.style({stroke:'#fff', lineWidth: 1});
    
    	// 最后一步渲染
    	chart.render();
	}
}

渲染结果
G2折线图_第1张图片

多折线图

多折线图与单折线图区别主要有两点:

  • 数据至少需要3个维度
  • 需要指明作色参照物(字段)
import {Component, OnInit} from '@angular/core';
import * as G2 from '@antv/g2';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
	ngOnInit(){
		// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
		const data = [
			{x: '1991', z: 'a', y: 1},
			{x: '1991', z: 'b', y: 2},
			{x: '1991', z: 'c', y: 3},

			{x: '1992', z: 'a', y: 11},
			{x: '1992', z: 'b', y: 22},
			{x: '1992', z: 'c', y: 33},
			
			{x: '1993', z: 'a', y: 1},
			{x: '1993', z: 'b', y: 2},
			{x: '1993', z: 'c', y: 3}
		];
		const chart = new G2.Chart({container:'EL-ID', forceFix:true});
		chart.source(data);
		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
		chart.line().position('x*y').color('z');
		// 在x*y的坐标上按z值绘制圆点
		chart.point().position('x*y').size(4).color('z').shape('circle');
		chart.render();
	}
}

渲染结果
G2折线图_第2张图片

动态数据

图表数据往往来自后台, 有可能为实时监控. 下面通过setInterval()模拟后台数据

Chart.changeData(data: array | DataSet.View)
用于修改图表的数据源,注意这里 data 的数据结构需要同原始的数据结构保持一致。

 letoffset = 1;
 setInterval(() => {
 	// 清空过期数据
	data.splice(0,3);
   	// 添加新数据
   	data.push({x: 1993 + offset + '', z: 'a', y: 1 + offset});
   	data.push({x: 1993 + offset + '', z: 'b', y: 2 + offset});
   	data.push({x: 1993 + offset + '', z: 'c', y: 3 + offset});
   	// 模拟数据变化
   	offset = Math.random() * 10;
   	// 重新渲染
   chart.changeData(data);
 }, 1000);

G2折线图_第3张图片

结语

G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。

推荐阅读:

  • [官方示例] https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
  • [官方文档] https://www.yuque.com/antv/g2-docs/get-started
  • https://segmentfault.com/a/1190000013413771#articleHeader2
  • https://segmentfault.com/a/1190000009411358

你可能感兴趣的:(antv)