G2折线图

最新推荐文章于 2023-09-13 18:02:34 发布

蓝色雨点

最新推荐文章于 2023-09-13 18:02:34 发布

阅读量6.3k

点赞数 1

分类专栏： antv 文章标签： g2 antv

本文链接：https://blog.csdn.net/Gozs_cs_dn/article/details/89022184

版权

antv 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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();
	}
}

渲染结果
单折线图简单示例

多折线图

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

数据至少需要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();
	}
}

渲染结果
多折线图示例

动态数据

图表数据往往来自后台, 有可能为实时监控. 下面通过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);