stz-util Documentation - v2.1.0

stz-chart-maker

Chart.js 기반의 차트 생성 도구

using npm :

npm install stz-chart-maker
npm install -D stz-chart-maker

api Docs

📚 API 문서

example

const chartConfig = ChartWrapper
                    .create('bar', data.labels , data.datasets, {})
                    .addDataLabels(true)
                    .addZoom(true)
                    .build('mixed-chart');

return (

  

);

Quick Start

import { ChartWrapper } from 'stz-chart-maker';
import { Chart } from 'react-chartjs-2';

const chart = ChartWrapper
  .create('bar', ['A', 'B', 'C'], [{ data: [10, 20, 30] }])
  .addZoom(true)
  .addDataLabels(true)
  .build('basic-bar');

;

Configuration (Browser)

stz-chart-maker는 런타임에 설정 파일을 직접 읽지 않습니다.
브라우저 환경에서는 setChartConfig()로 전역 설정을 전달하세요.

1) 앱 코드에서 직접 전역 설정 (권장)

import { setChartConfig } from 'stz-chart-maker';

setChartConfig({
  errorLogging: true,
  silentMode: false,
  defaultColor: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F'],
  autoRegister: true,
  // registerTypes: ['bar', 'line']
});

2) 번들러 플러그인으로 설정 주입

.stzrc.js를 사용할 경우, 번들러 플러그인이 빌드 시점에 설정을 읽어 setChartConfig(...)를 주입합니다.

// .stzrc.js
module.exports = {
  defaultColor: ['#111111', '#22c55e', '#3b82f6'],
  autoRegister: true
};

설정 옵션

옵션	타입	기본값	설명
`errorLogging`	`boolean`	`true`	에러 로그 출력 여부
`silentMode`	`boolean`	`true`	에러 발생 시 예외를 던지지 않고 처리
`defaultColor`	`string[]`	내부 기본 팔레트	차트 전역 기본 색상 배열
`autoRegister`	`boolean`	`false`	모든 차트 타입 자동 등록
`registerTypes`	`ChartType[]`	`[]`	특정 차트 타입만 선택 등록

주의사항

setChartConfig()는 첫 번째 ChartWrapper.create(...) 호출 전에 실행해야 합니다.