ngx-g2plot

ngx-g2plot copied to clipboard

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

<div starkG2plotLine  #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']
})
export class LineComponent {

  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 {
   const options = {
      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 {
    const data = [
      { 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
  ]
})
export class G2plotDemoModule { }

提示

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

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

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

所有指令列表

关于命名

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