安裝依賴
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);
結語
G2 是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。
推薦閱讀: