문서 › 프레임워크와 서버

웹 컴포넌트 <chart-82>

프레임워크 없이 HTML 태그 하나로.

CDN 스크립트(82chart.min.js, 82chart.esm.js)는 <chart-82> 를 자동으로 등록합니다. npm 패키지에서는 defineChartElement() 를 한 번 부르세요. 서버 템플릿(PHP, JSP, Django)에서 JSON 만 찍어 주면 됩니다.

<chart-82
  type="bar"
  title="월별 매출"
  unit="원"
  height="280"
  data='{"labels":["1월","2월","3월"],"series":[{"name":"매출","data":[32000000,41000000,38500000]}]}'
></chart-82>

import { defineChartElement } from '@82chart/core';
import '@82chart/core/styles.css';
defineChartElement();            // <chart-82>
// defineChartElement('my-chart'); // 다른 태그 이름으로

const el = document.querySelector('chart-82');
el.options = { zoom: true, annotations: { y: [{ value: 40000000, label: '목표' }] } }; // 객체로 넘기는 옵션
el.chart.download('png');        // 안쪽 차트 인스턴스

속성	설명
`type`, `theme`, `skin`	문자열 그대로
`data`	JSON 문자열 (`{"labels": …, "series": …}`)
`options`	나머지 옵션의 JSON 문자열. 함수가 필요한 옵션은 `el.options` 속성으로
`height`	숫자 또는 `auto`
`title`, `subtitle`, `eyebrow`, `footnote`, `unit`	카드 머리글과 단위
`value`, `delta`	숫자로 읽을 수 있으면 숫자로

속성을 바꾸면 차트가 바로 다시 그려지고, 요소를 문서에서 빼면 차트도 정리됩니다.