Angular>> ngx-g2plot>> 返回
项目作者： stack-stark

项目描述 ：
g2plot的angular封装 Angular library based on @antv/g2plot
高级语言： TypeScript
项目地址: git://github.com/stack-stark/ngx-g2plot.git
创建时间： 2020-05-07T03:59:48Z
项目社区：https://github.com/stack-stark/ngx-g2plot
开源协议：MIT License
关键词：
angular g2 g2plot ngx ngx-g2plot
下载


NgxG2plot

angular的g2plot封装,方便使用。

安装

  1. npm install --save  ngx-g2plot
  2. #or
  3. yarn add ngx-g2plot

在线预览

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

使用

line.component.html

  1. <div starkG2plotLine  #divG2plotLine="g2plotLine" [options]="options"></div>

line.component.ts

  1. import { Component, ViewChild } from '@angular/core';
  2. import { G2plotLineDirective } from 'ngx-g2plot';
  4. @Component({
  5.   selector: 'app-line',
  6.   templateUrl: './line.component.html',
  7.   styleUrls: ['./line.component.less']
  8. })
  9. export class LineComponent {
  11.   constructor() { }
  12.   //获取到指令对象 
  13.   @ViewChild('divG2plotLine') divG2plotLine!: G2plotLineDirective;
  15.   data: Array<object> = [
  16.     { year: '1991', value: 3 },
  17.     { year: '1992', value: 4 },
  18.     { year: '1993', value: 3.5 },
  19.     { year: '1994', value: 5 },
  20.     { year: '1995', value: 4.9 },
  21.     { year: '1996', value: 6 },
  22.     { year: '1997', value: 7 },
  23.     { year: '1998', value: 9 },
  24.     { year: '1999', value: 13 },
  25.   ];
  27.   options = {
  28.     title: {
  29.       visible: true,
  30.       text: '折线图',
  31.     },
  32.     description: {
  33.       visible: true,
  34.       text: '用平滑的曲线代替折线。',
  35.     },
  36.     data: this.data,
  37.     xField: 'year',
  38.     yField: 'value',
  39.   };
  41.   update(): void {
  42.    const options = {
  43.       title: {
  44.         visible: true,
  45.         text: 'The line chart',
  46.       },
  47.       description: {
  48.         visible: true,
  49.         text: 'Replace broken lines with smooth curves.',
  50.       },
  51.       xField: 'year',
  52.       yField: 'value',
  53.     };
  54.     this.divG2plotLine.update(options);
  55.   }
  57.   changeData(): void {
  58.     const data = [
  59.       { year: '1991', value: 13 },
  60.       { year: '1992', value: 14 },
  61.       { year: '1993', value: 13.5 },
  62.       { year: '1994', value: 15 },
  63.       { year: '1995', value: 14.9 },
  64.       { year: '1996', value: 16 },
  65.       { year: '1997', value: 17 },
  66.       { year: '1998', value: 19 },
  67.       { year: '1999', value: 23 },
  68.     ];
  69.     this.divG2plotLine.changeData(data);
  70.   }
  73.   destroy(): void {
  74.     this.divG2plotLine.destroy();
  75.   }
  77.   changeSize(): void {
  78.     //使用当前实例方法 
  79.     this.divG2plotLine.instance.changeSize(300, 300);
  80.   }
  81. }

line.module.ts

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { G2plotLineModule } from 'ngx-g2plot';
  5. @NgModule({
  6.   declarations: [G2plotDemoComponent],
  7.   imports: [
  8.     CommonModule,
  9.     G2plotLineModule
  10.   ]
  11. })
  12. export class G2plotDemoModule { }

提示

我通过指定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