본문으로 건너뛰기

차트

데이터를 여러 차트 종류로 시각화할 수 있습니다.

프로퍼티

프로퍼티타입설명
이름 (name)string차트 컴포넌트의 고유 이름
코드 (code)string (ChartData)차트에 표시할 데이터
종류 (type)ChartType차트에 표시할 데이터
X축 (xAxis)ChartXAXisX축 데이터와 제목
Y축 (yAxis)ChartYAXisY축 제목
데이터셋 (datasets)ChartDataset[]Y축 종류, 데이터, 제목과 계산 함수
제목 (title)string차트 상단에 표시할 제목
부제목 (subtitle)string차트 상단에 표시할 부제목
구분 키 (divider)ChartDividerY축을 나눌 구분 키
누적 (isStacked)boolean막대 차트 누적 여부

이름 (name)

차트 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.

코드 (code)

차트에 표시할 데이터 입니다.

쿼리 및 워크플로우의 실행 결과로 옵션을 추가하거나,

직접 값을 입력하여 옵션을 추가할 수 있습니다.

종류 (type)

차트의 종류 입니다.

차트 종류에는 막대, 라인, 파이 또는 복합표가 있습니다.

복합표를 선택하면 두 개 이상의 축을 사용할 수 있습니다.

복합표에서는 막대 또는 라인 축만 사용할 수 있습니다.

X축 (xAxis)

X축에 표시할 데이터와 제목을 설정할 수 있습니다.

제목에는 템플릿을 사용할 수 있습니다.

데이터셋 (datasets)

Y축의 종류, 데이터, 제목과 계산 함수를 설정할 수 있습니다.

Y축은 여러개를 설정할 수 있습니다.

계산 함수에는 합계, 평균, 개수가 있습니다.

제목과 부제목 (title, subtitle)

차트 상단에 표시할 제목과 부제목을 설정할 수 있습니다.

구분 키 (divider)

차트 데이터를 구분 키를 이용해 여러 축으로 나눌 수 있습니다.

누적 (isStacked)

막대 차트는 구분 키를 이용해 누적 차트로 표시할 수 있습니다.

타입 정의

type ChartData = Record<string, unknown>[];

type ChartType = 'bar' | 'line' | 'pie' | 'complex';

type ChartDatasetType = 'bar' | 'line';

type ChartAggregationFn = 'avg' | 'count' | 'sum';

interface ChartDataset {
type: ChartDatasetType;
key: string;
label: string;
aggregationFn: ChartAggregationFn;
}

export interface ChartDivider {
key: string;
}