angular引入Antv G2Plot实现数据可视化

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，本文将介绍如何在angular项目中引入g2plot实现数据可视化

1、新建angular项目

ng new g2plot-test

2、安装G2Plot

npm install @antv/g2plot

3、在需要引用的ts文件中import（如 app.component.ts)

import { Bar, BarConfig, Line, Column } from '@antv/g2plot'

4、因为G2Plot需要用到html中的dom 元素，因此import如下配置

import {Component, OnInit, Renderer2, OnDestroy, AfterViewInit, ElementRef, ViewChild} from '@angular/core';

5、app.component.ts 文件内容如下

import {Component, OnInit, Renderer2, OnDestroy, AfterViewInit, ElementRef, ViewChild} from '@angular/core';


import { Bar, BarConfig, Line, Column } from '@antv/g2plot';


@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class BasicSimpleComponent implements OnInit{


    constructor(private el: ElementRef, private renderer: Renderer2) {}


    data = [

        { year: '1951 年', sales: 38 },

        { year: '1952 年', sales: 52 },

        { year: '1956 年', sales: 61 },

        { year: '1957 年', sales: 145 },

        { year: '1958 年', sales: 48 },

    ];


    ngOnInit(): void {

        const barPlot: Bar = new Bar(this.el.nativeElement.querySelector('#c1'), {

            data: this.data,

            xField: 'sales',

            yField: 'year',

            colorField: 'year',

        });

        barPlot.render();

    }

}

6、app.component.html文件内容如下

<div id="c1" ></div>

7、运行程序即可看到如下效果，ng serve -o

注：本文示例为G2Plot官网的入门示例。只是指定html元素的时候换成的angular的ElementRef方式。

更多图标样式参见G2Plot官网：https://g2plot.antv.vision/zh/docs/manual/introduction

angular官网认为使用ElementRef可能存在安全风险，如果大家有更好的方法欢迎留言，谢谢

https://angular.cn/api/core/ElementRef#description

=====================================================================================================

@ViewChild和@ViewChildren是Angular提供给我们的装饰器，用于从模板视图中获取匹配的元素。需要注意的是@ViewChild和@ViewChildren会在父组件钩子方法ngAfterViewInit调用之前赋值。

前面步骤5中的app.component.ts可改为通过@ViewChild获取页面元素

import {Component, OnInit, Renderer2, OnDestroy, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
import { Bar, BarConfig, Line, Column } from '@antv/g2plot';

@Component({

selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css']

})

export class BasicSimpleComponent implements AfterViewInit {


@ViewChild('demo') demoDom: ElementRef;


    constructor(private el: ElementRef, private renderer: Renderer2) {}


    data = [

        { year: '1951 年', sales: 38 },

        { year: '1952 年', sales: 52 },

        { year: '1956 年', sales: 61 },

        { year: '1957 年', sales: 145 },

        { year: '1958 年', sales: 48 },

    ];

    ngAfterViewInit(): void {

        const barPlot: Bar = new Bar(this.demoDom.nativeElement, {

            data: this.data,

            xField: 'sales',

            yField: 'year',

            colorField: 'year',

        });

        barPlot.render();

    }

}

app.component.html改为如下内容

<div #demo></div

来源：oschina

链接：https://my.oschina.net/sunhualong/blog/4450894

标签

G2Plot