[React_Library] Apexcharts.js 그래프를 만들어 봅시다.

그래프를 만드는 라이브러리들이 여러가지 있지만 그 중 괜찮게 사용한 Apexcharts.js 를 소개합니다.

Apexcharts.js

https://apexcharts.com/

일단 홈페이지 타고 들어가면 아주 멋들어진 Demo 들이 나옵니다. 그중 저는 line 과 Column 차트를 사용하였는데, 생각보다 멋지게 나오고 디자인도 괜찮게 나와 (커스텀을 꼭 하지 않아도) 색상만 변경해서 사용해 보았습니다.
그리고 일단 정말 다양한 차트를 제공합니다!

사용방법

java, Angular , Vue , React 에서 사용가능합니다.
저는 React 를 사용하니 React로 소개하겠습니다.

1. 설치

npm install --save react-apexcharts apexcharts

2. index.html 에 script 넣기

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts"></script>

3. 활용하기

import React, { Component } from "react";
import Chart from "react-apexcharts";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        chart: {
          id: "basic-bar",
          type: "line", // 원하는 차트 type 지정
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] //표에 카테고리로 뽑힐 값들 넣기
        },
        colors: ["#f68b42"], // 표 색상 지정 
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91] // 각각의 데이터 값넣기
        }
      ]
    };
  }

  render() {
    return (
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line" 
              width="500"
            />
            // type 에 원하는 차트 타입지정 , width, height 로 높이 너비 지정
          </div>
        </div>
      </div>
    );
  }
}

export default App;

자세한 방법은 사이트를 참조하여 활용하세요. 차트 종류가 다양합니다.