[ant-design] React를 활용한 Chart 만들기

간단한 그래프를 만들 것이다.

1. 터미널에 다음을 입력해 라이브러리를 받는다.

npm install @ant-design/charts

2. column기준으로 만들기 위해 <Column/>을 사용했다.

컴포넌트는 다음과 같이 작성하면 된다.

import React, {Component} from "react";
import {Column} from '@ant-design/charts';

class Graph extends Component {
    constructor(props) {
        super(props);
        this.data = [
            {
                type: 'test1',
                value: 38,
            },
            {
                type: 'test2',
                value: 52,
            },
            {
                type: 'test3',
                value: 61,
            },
            {
                type: 'test4',
                value: 145,
            },
        ];
    }

    render() {
        const config = {
            data: this.data,
            xField: 'type',
            yField: 'value',
            style: {
                height: '400px',
                width: '400px'
            }
        };

        return (
            <Column {...config} />
        );
    }
}

export default Graph;

this.data 를 보면 리스트로 값을 전달하고 있다, render()에서 config를 선언해, 필요한 요소들을 정의해준다.

그러면 다음과 같은 모양이 나온다.

 

세밀한 조정은 API 보면서 조정하면 될 듯하다!

 

 

 

[참고]

www.npmjs.com/package/@ant-design/charts

charts.ant.design/demos/global/