TOAST UI Chart 설치 사용법

TOAST UI Chart 설치 사용법

TOAST UI Chart Line

https://ui.toast.com/tui-chart

TOAST UI :: Make Your Web Delicious!

특징

TOAST UI Chart 3은 svg 기반으로 개발 되었으나,

TOAST UI Chart 4는 canvas 기반으로 의존을 모두 제거하고 TypeScript로 작성되었다.

 

NHN에서 개발한 차트 라이브러리이다.

따라서 document가 한국어를 지원하고 있다.

https://github.com/nhn/tui.chart/tree/main/docs/ko

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

 

아래 링크에서 다양한 예제를 볼 수 있다.

https://toastui-chart4.netlify.app

Storybook

 

설치

npm

$ npm install --save @toast-ui/chart # Latest version
$ npm install --save @toast-ui/chart@<version> # Specific version

CDN

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

 

사용법

HTML

<div id="chart"></div>

JavaScript

/* namespace */
const Chart = toastui.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 },
};

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

 

주요 API

setData()

차트 데이터 전체를 변경한다.

https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#setdata

 

addData()

현재 데이터를 기반으로 데이터를 추가한다. 실시간으로 데이터를 추가할 때 사용할 수 있다.

https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#adddata

 

updateOptions()

기존 차트의 옵션을 업데이트한다.

https://github.com/nhn/tui.chart/blob/main/docs/ko/common-api.md#updateoptions

 

Live Update

https://github.com/nhn/tui.chart/blob/main/docs/ko/common-liveUpdate-options.md

series.shift옵션을 true로 적용하지 않으면 addData()시 데이터가 쌓이는 형태를 갖게된다.

적용 방법

1. series.shift 옵션을 true로 지정한다.

const options = {
  series: {
    shift: true
  }
}

1. addData API를 사용해 데이터를 추가하면 된다.

const chart = new LineChart({ el, data, options });

chart.addData(newData, newCategory);