Angular's g2plot package is easy to use
npm install ngx-g2plot bash
npm install --save ngx-g2plot
#or
yarn add ngx-g2plot
`
Preview
https://stack-stark.github.io/ngx-g2plot-preview-compiled/
Usage
#### line.component.html
` html
`
#### line.component.ts
` js
import { Component, ViewChild } from '@angular/core';
import { G2plotLineDirective } from 'ngx-g2plot';
@Component({
selector: 'app-line',
templateUrl: './line.component.html',
styleUrls: ['./line.component.less']
})
export class LineComponent {
constructor() { }
// Gets to the instruction object
@ViewChild('divG2plotLine') divG2plotLine!: G2plotLineDirective;
data: Array`
#### line.module.ts
` ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { G2plotLineModule } from 'ngx-g2plot';
@NgModule({
declarations: [G2plotDemoComponent],
imports: [
CommonModule,
G2plotLineModule
]
})
export class G2plotDemoModule { }
`
Tip
I'm using exportAs the deduced update(), changeData(), destroy() the three methods, so that you can at any time to change chart.
If you need to get the current diagram instance and all its properties and methods, use this.xxx.instance. See changeSize() above for details.
See the official documentation for all methods of charting: https://g2plot.antv.vision/zh/docs/manual/plot-api
All Directive
指令名/Directive | 图表名 | exportAs | Module
-|-|-|-
starkG2plotArea | Area - 面积图 | g2plotArea | G2plotAreaModule
starkG2plotBar | Bar - 基础条形图 | g2plotBar | G2plotBarModule
starkG2plotBidirectionalBar | BidirectionalBar - 对称条形图 | g2plotBidirectionalBar | G2plotBidirectionalBarModule
starkG2plotBox | Box - 箱图 | g2plotBox | G2plotBoxModule
starkG2plotBullet | Bullet - 子弹图 | g2plotBullet | G2plotBulletModule
starkG2plotChord | Chord - 弦图 | g2plotChord | G2plotChordModule
starkG2plotColumn | Column - 柱状图 | g2plotColumn | G2plotColumnModule
starkG2plotDualAxes | DualAxes - 柱线混合图 | g2plotDualAxes | G2plotDualAxesModule
starkG2plotFunnel | Funnel - 漏斗图 | g2plotFunnel | G2plotFunnelModule
starkG2plotGauge | Gauge - 仪表盘 | g2plotGauge | G2plotGaugeModule
starkG2plotHeatmap | Heatmap - 热力图 | g2plotHeatmap | G2plotHeatmapModule
starkG2plotHistogram | Histogram - 直方图 | g2plotHistogram | G2plotHistogramModule
starkG2plotLine | Line - 折线图 | g2plotLine | G2plotLineModule
starkG2plotLiquid | Liquid - 水波图 | g2plotLiquid | G2plotLiquidModule
starkG2plotPie | Pie - 饼图 | g2plotPie | G2plotPieModule
starkG2plotRadialBar | RadialBar - 玉珏图 | g2plotRadialBar | G2plotRadialBarModule
starkG2plotRadar | Radar - 雷达图 | g2plotRadar | G2plotRadarModule
starkG2plotRose | Rose - 玫瑰图 | g2plotRose | G2plotRoseModule
starkG2plotSankey | Sankey - 桑基图 | g2plotSankey | G2plotSankeyModule
starkG2plotScatter | Scatter - 散点图 | g2plotScatter | G2plotScatterModule
starkG2plotStock | Stock - 股票图 | g2plotStock | G2plotStockModule
starkG2plotSunburst | Sunburst - 旭日图图 | g2plotSunburst | G2plotSunburstModule
starkG2plotTinyColumn | TinyColumn - 迷你图 | g2plotTinyColumn | G2plotTinyColumnModule
starkG2plotTreemap | Treemap - 树图 | g2plotTreemap | G2plotTreemapModule
starkG2plotWaterfall | Waterfall - 瀑布图 | g2plotWaterfall | G2plotWaterfallModule
starkG2plotWordCloud | WordCloud - 词云 | g2plotWordCloud | G2plotWordCloudModule
$3
Directive = starkG2plot + Graph Name,
exportAs = g2plot + Graph Name,
Module = G2plot + Graph Name + Module`