ngx-g2plot v2.2.0

About

Angular's g2plot package is easy to use

Install

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

Preview

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

Usage

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() { }
  // Gets to the instruction object
  @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 {
    //Use the current instance method
    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 { }

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

About the name

Directive = starkG2plot + Graph Name,

exportAs = g2plot + Graph Name,

Module = G2plot + Graph Name + Module

G2plot official document address

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

Use has encountered a problem or defect?

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

License

MIT