NgxG2plot

angular的g2plot封装,方便使用。

安装

npm install --save ngx-g2plot
#or
yarn add ngx-g2plot

在线预览

https://stack-stark.github.io/ngx-g2plot-preview-compiled/

使用

line.component.html

<divstarkG2plotLine#divG2plotLine="g2plotLine" [options]="options"></div>

line.component.ts

import{Component,ViewChild}from'@angular/core';import{G2plotLineDirective}from'ngx-g2plot';
@Component({selector: 'app-line',templateUrl: './line.component.html',styleUrls: ['./line.component.less']})exportclassLineComponent{constructor(){}//获取到指令对象 
@ViewChild('divG2plotLine')divG2plotLine!: G2plotLineDirective;data: Array<object>=[{year: '1991',value: 3},{year: '1992',value: 4},{year: '1993',value: 3.5},{year: '1994',value: 5},{year: '1995',value: 4.9},{year: '1996',value: 6},{year: '1997',value: 7},{year: '1998',value: 9},{year: '1999',value: 13},];options={title: {visible: true,text: '折线图',},description: {visible: true,text: '用平滑的曲线代替折线。',},data: this.data,xField: 'year',yField: 'value',};update(): void{constoptions={title: {visible: true,text: 'The line chart',},description: {visible: true,text: 'Replace broken lines with smooth curves.',},xField: 'year',yField: 'value',};this.divG2plotLine.update(options);}changeData(): void{constdata=[{year: '1991',value: 13},{year: '1992',value: 14},{year: '1993',value: 13.5},{year: '1994',value: 15},{year: '1995',value: 14.9},{year: '1996',value: 16},{year: '1997',value: 17},{year: '1998',value: 19},{year: '1999',value: 23},];this.divG2plotLine.changeData(data);}destroy(): void{this.divG2plotLine.destroy();}changeSize(): void{//使用当前实例方法 this.divG2plotLine.instance.changeSize(300,300);}}

line.module.ts

import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{G2plotLineModule}from'ngx-g2plot';
@NgModule({declarations: [G2plotDemoComponent],imports: [CommonModule,G2plotLineModule]})exportclassG2plotDemoModule{}

提示

我通过指定exportAs导出update()、changeData()、destroy()这三种方法，以便您可以在任何时候更改图表。使用方法见上面

如果你需要获取当前图表实例及其所有属性和方法,可使用this.xxx.instance,参考见上面的changeSize()

图表所有方法见官方文档: https://g2plot.antv.vision/zh/docs/manual/plot-api

所有指令列表

指令名/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

关于命名

指令名为 starkG2plot + 官方图表名称, exportAs导出为g2plot + 官方图表名称, Module为 G2plot + 官方图表名称 + Module

g2plot官方文档地址

https://g2plot.antv.vision/zh/docs/manual/introduction

使用遇到了问题或者缺陷?

https://github.com/stack-stark/ngx-g2plot/issues

License

MIT