Toast UI (feat.React) 사용기 2 - Chart 기능

Toast UI Chart - Javascript 로 구현

가장 먼저 차트가 생성될 컨테이너 요소를 추가해준다.

id는 chart 로 해주자.

 

Toast UI 차트는 생성자 함수를 통해 인스턴스를 생성할 수 있다.

1. namespace 사용
const Chart = toastui.Chart;

2. CommonJS 사용
const Chart = require('@toast-ui/chart');

3. ES6 사용
import Chart from '@toast-ui/chart';
import { BarChart } from '@toast-ui/chart';

Webpack 4는 패키지 모듈을 가져올 때 main 필드보다 module 필드에 정의된 진입점을 우선적으로 가져오므로,
프로젝트에서 웹팩4를 사용하고 require 구문을 사용하여 토스트를 불러온다면,
module 필드에 정의된 ESM 파일이 로드될 것이며 require 구문으로 가져올 수 있도록 트랜스 파일 될 것이다.

const Chart = require('@toast-ui/chart/dist/toastui-chart.min.js'); // UMD 용 번들 파일 로드


Webpack 5는 exports 필드를 지원하므로 패키지에서 정의된 exports 필드를 보고 모듈 진입점을 판단할 수 있다.

 

Chart 을 사용하기 위한 CSS 파일을 추가해줘야 한다.

// 1. ES6
import '@toast-ui/chart/dist/toastui-chart.min.css';

// 2. CommonJS
require('@toast-ui/chart/dist/toastui-chart.min.css');

// 3. CDN
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />

 

인스턴스 생성

생성자 함수는 el, data, options 세 가지를 인자로 가진다.

1. el : 차트를 자식 요소로 갖는 HTML 요소
   • id 를 chart 로 주었던 것을 찾아준다.
2. data : 차트의 기반이 되는 숫자 데이터
   • categories 는 y축을, series 에는 x축의 값을 배열로 전달한다.
   • 특히 차트의 종류에 따라 들어가는 정보값이 달라진다.
3. options : 범례, 정렬, 툴팁 포맷 등 여러 기능을 나타내는 옵션
   • chart 의 옵션(너비, 높이) 등을 지정해줄 수 있다.

const el = document.getElementById('chart');
const data = {
  categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    {
      name: 'Budget',
      data: [5000, 3000, 5000, 7000, 6000, 4000, 1000],
    },
    {
      name: 'Income',
      data: [8000, 4000, 7000, 2000, 6000, 3000, 5000],
    },
  ],
};
const options = {
  chart: { width: 700, height: 400 },
};

 

위의 정보를 토대로 Chart.차트종류({ el, data, options }) 로 차트를 만들면 자동으로 그려주게 된다.

const chart = Chart.barChart({ el, data, options });
// const chart = new BarChart({ el, data, options });

 

Toast UI Chart - react 로 구현해보기

https://github.com/nhn/tui.chart

GitHub - nhn/tui.chart: 🍞📊 Beautiful chart for data visualization.

https://github.com/nhn/tui.chart/tree/main/apps/react-chart

 

react wrapper Toast UI Chart. 라이브러리 설치

npm install --save @toast-ui/react-chart

 

CSS 파일과 Chart 관련 컴포넌트 import

import "@toast-ui/chart/dist/toastui-chart.min.css";
import { BarChart, LineChart } from "@toast-ui/react-chart";

이때 위와 달리 react 로 wrapper 된 컴포넌트를 가져와야 한다.

 

const data = {
  categories: ['June', 'July', 'Aug', 'Sep', 'Oct', 'Nov'],
  series: [
    {
      name: 'Budget',
      data: [5000, 3000, 5000, 7000, 6000, 4000],
    },
    {
      name: 'Income',
      data: [8000, 1000, 7000, 2000, 5000, 3000],
    },
  ],
};

const options = {
  chart: {
    width: 1160,
    height: 650,
    title: 'Monthly Revenue',
  },
  yAxis: {
    title: 'Month',
  },
  xAxis: {
    title: 'Amount',
  },
};

const containerStyle = {
  width: '600px',
  height: '600px',
};

props 의 형태로 data와 options 을 전달해준다.

const MyComponent = () => 
	<BarChart data={data} options={options} style={containerStyle} />;

props 옵션

 

컴포넌트 방식 말고 useRef 를 사용하는 방식으로는

import { useRef } from 'React';

function MyComponent() {
  const chartRef = useRef(null);

  return (
    <>
      <BarChart ref={chartRef} data={data} options={options} />
    </>
  );
}

ref props에 BarChart 로 지정해준다.

다만 useRef 와 참조 부분에서 비동기적으로 문제가 생기는지 바로 읽어오는건 시도해봤는데 되지 않았다.

그러므로 클릭을 해줘서 나타나게끔 우회가 필요한가 보다.

import { useRef } from 'React';

function MyComponent() {
  const chartRef = useRef(null);

  const handleClickButton = () => {
    console.log('type:', chartRef.current.getInstance().showSeriesDataLabel());
  };

  return (
    <>
      <BarChart ref={chartRef} data={data} options={options} />
      <button onClick={handleClickButton}>showSeriesDataLabel</button>
    </>
  );
}

공식문서에선 Wrapper 컴포넌트는 Toast UI Chart 의 인스턴스 메서드를 직접 호출하는 방법을 제공하지 않는다고 한다.
대신 래퍼 구성 요소의 getInstance() 메서드를 호출하여 인스턴스를 가져오고 인스턴스에 대한 메서드를 호출할 수 있다고 함.

 

예제로 BarChart 만 다뤘지만 실무에 들어가면서 여러 차트를 써야하므로 나중에 차트별로 상세히 정리해보겠다..