chart
English시작하기

문서 › 시작

시작하기

5분 안에 내 화면에 첫 차트를 그리는 방법.

82chart는 의존성이 없는 SVG 차트 부품입니다. 빌드 도구가 없는 PHP·JSP 화면이라면 CDN 두 줄, npm을 쓰는 프로젝트라면 패키지 하나면 됩니다. 라이선스 키, 워터마크, 가입, 결제가 없습니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'bar',
  title: '월별 매출',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

축에는 3,200만·5,200만처럼 만·억 단위가, 툴팁에는 32,000,000원처럼 정확한 숫자가 나옵니다. 문서 언어(<html lang>)가 한국어면 기본이 만·억입니다.

CDN으로 붙이기

가장 빠른 방법입니다. 스크립트가 전역 Chart82 를 만들고 <chart-82> 태그도 등록합니다.

<link rel="stylesheet" href="https://82chart.com/cdn/v0.2.0/82chart.css">
<script src="https://82chart.com/cdn/v0.2.0/82chart.min.js"></script>

<div id="chart"></div>
<script>
  Chart82.createChart('#chart', {
    type: 'bar',
    title: '월별 매출',
    unit: '원',
    data: {
      labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
    },
  });
</script>

npm으로 설치하기

npm i @82chart/core
import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';

const chart = createChart('#chart', {
  type: 'bar',
  title: '월별 매출',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

chart.on('click', (point) => console.log(point.x, point.y));

createChart 의 첫 인자는 요소나 선택자입니다. 그 요소 안의 내용은 차트로 바뀝니다. 너비는 부모 폭을 따라가고, 창 크기가 바뀌면 알아서 다시 그립니다.

데이터 바꾸기

chart.update({
  labels: ['7월', '8월'],
  series: [{ name: '매출', data: [64000000, 70500000] }],
});
chart.setOptions({ type: 'line', smooth: true }); // 옵션 일부만 바꾸기
chart.destroy();                                  // 화면에서 없앨 때

다음 단계