React/AntV G2plot Chart 적용

 

Module 추가

$ yarn add @antv/g2plot

https://yarnpkg.com/package/@antv/g2plot

https://yarnpkg.com/package/@antv/g2plot

 

JSX Source

Component base라서 ComponentDidMount 함수에서 적용

import { Pie } from '@antv/g2plot';

class UnitsDashboard extends Component {
  state = {}
  
  setPie = () => {
    const data = [
      { type: '라벨1', value: 27 },
      { type: '라벨2', value: 25 },
      { type: '라벨3', value: 18 },
      { type: '라벨4', value: 15 },
      { type: '라벨5', value: 10 },
    ];

    const piePlot = new Pie('container', {
      appendPadding: 10,
      data,
      angleField: 'value',
      colorField: 'type',
      radius: 1,
      innerRadius: 0.6,
      label: {
        type: 'inner',
        offset: '-50%',
        content: '{value}',
        style: {
          textAlign: 'center',
          fontSize: 14,
        },
      },
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      statistic: {
        title: false,
        content: {
          style: {
            whiteSpace: 'pre-wrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            fontSize: 18,
          },
          content: 'AntV\nG2Plot',
        },
      }
    });

    piePlot.render();
    piePlot.update();
  }

  componentDidMount() {
    this.setPie();

    window.addEventListener('resize', this.resize.bind(this));
  }

  resize() {
    if (this.context.isMobile() === true) {
      console.log('MOBILE');
    } else {
      console.log('PC');
    }
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.resize.bind(this));
  }
  ...
  
  
  render() {
    ...

    return (
      <>
        <div id="container"></div>
      </>
    );
  )
)
...

 

참조)

https://g2plot.antv.vision/en/examples/pie/donut#basic

Donut

https://g2plot.antv.vision/en/docs/api/options/theme

Theme