Overview

Element

Effect

차트 요소

소품유형필수예시값 범위설명
chartTypestringtrue--표시할 차트 유형. 지원되는 유형: bar, line, area, scatter, pie, doughnut, radar.
chartWidthnumbertrue-200 - 800차트 캔버스의 너비(픽셀 단위).
chartHeightnumbertrue-150 - 600차트 캔버스의 높이(픽셀 단위).
bgColorstringfalse--차트의 배경 색상(헥스 형식).
bgAlphanumberfalse-0 - 1차트 배경의 투명도 수준. 1은 완전 불투명, 0은 완전 투명.
showAxisbooleanfalse--차트 축을 표시할지 여부.
axisColorstringfalse--차트 축의 색상(헥스 형식).
axisWidthnumberfalse-1 - 10차트 축의 너비(픽셀 단위).
showGridbooleanfalse--차트 그리드를 표시할지 여부.
gridColorstringfalse--차트 그리드의 색상(헥스 형식).
gridAlphanumberfalse-0 - 1차트 그리드의 투명도 수준. 1은 완전 불투명, 0은 완전 투명.
showLabelsbooleanfalse--차트 레이블을 표시할지 여부.
labelStyleobjectfalse--차트 레이블의 텍스트 스타일 구성.
labelStyle.fillstringfalse--차트 레이블의 폰트 색상(헥스 형식).
labelStyle.fontSizenumberfalse-8 - 100차트 레이블의 폰트 크기(픽셀 단위).
labelStyle.fontFamilystringfalse--차트 레이블의 폰트 패밀리.
labelStyle.fontWeightstringfalse--차트 레이블의 폰트 두께(예: normal, bold).
labelStyle.strokestringfalse--차트 레이블의 스트로크 색상(헥스 형식).
labelStyle.strokeThicknessnumberfalse-0 - 10차트 레이블의 스트로크 너비(픽셀 단위).
labelStyle.dropShadowbooleanfalse--차트 레이블에 그림자 효과를 활성화할지 여부.
labelStyle.dropShadowColorstringfalse--차트 레이블의 그림자 색상(헥스 형식).
labelStyle.dropShadowBlurnumberfalse-0 - 20레이블 그림자의 흐림 반경.
labelStyle.dropShadowDistancenumberfalse-0 - 20텍스트에서 레이블 그림자의 거리.
labelStyle.dropShadowAnglenumberfalse-0 - 6.28레이블 그림자의 각도(라디안 단위).
labelStyle.dropShadowAlphanumberfalse-0 - 1레이블 그림자의 불투명도.
linePointStylestringfalse--선/면적 차트에서 데이터 포인트의 스타일. 옵션: filled, hollow.
lineSmoothbooleanfalse--선/면적 차트에서 선을 부드럽게 할지 여부.
lineAreaAlphanumberfalse-0 - 1면적 차트에서 채워진 영역의 투명도 수준.
showLegendbooleanfalse--차트 범례를 표시할지 여부.
legendPositionstringfalse--범례의 위치. 현재 지원: bottom.
legendItemSizenumberfalse-10 - 30범례 항목의 크기(픽셀 단위).
legendGapnumberfalse-4 - 20범례 항목 간의 간격(픽셀 단위).
showBarBackgroundbooleanfalse--막대 차트의 배경을 표시할지 여부.
barBackgroundColorstringfalse--막대의 배경 색상(헥스 형식).
barBackgroundAlphanumberfalse-0 - 1막대 배경의 투명도 수준.
barOrientationstringfalse--막대의 방향. 옵션: vertical, horizontal.
barCornerRadiusnumberfalse-0 - 20막대의 모서리 반경(픽셀 단위).
dataSetarrayfalse--차트를 렌더링하는 데 사용되는 데이터 세트의 배열. 각 데이터 세트는 시간 포인트(dataTime)와 데이터 포인트(dataPoints)를 포함합니다.

차트 유형

chartType 속성은 시각화 스타일을 결정합니다:

  • bar: 수직 또는 수평 막대 차트
  • line: 선택적 스무딩이 있는 선 차트
  • area: 채워진 영역이 있는 면적 차트
  • scatter: 데이터 포인트가 있는 산점도
  • pie: 비율을 보여주는 원형 차트
  • doughnut: 중앙에 구멍이 있는 도넛 차트
  • radar: 레이더/스파이더 차트

데이터 구조

dataSet은 각 객체가 다음을 포함하는 데이터 객체의 배열입니다:

  • dataTime: ChartNode에 대한 시간 포인트(초 단위)
  • dataPoints: 이 시간에 표시될 데이터 포인트의 배열

dataPoints의 각 데이터 포인트는 다음을 포함합니다:

  • id: 데이터 포인트의 고유 식별자
  • label: 데이터 포인트의 레이블/이름
  • value: 숫자 값
  • color (선택 사항): 이 데이터 포인트의 사용자 정의 색상(헥스 형식)

레이블 스타일링

labelStyle 객체는 차트 레이블의 모양을 제어합니다:

  • 폰트 속성: fill, fontSize, fontFamily, fontWeight
  • 스트로크 속성: stroke, strokeThickness
  • 그림자 속성: dropShadow, dropShadowColor, dropShadowBlur, dropShadowDistance, dropShadowAngle, dropShadowAlpha

선 및 면적 차트 기능

선 및 면적 차트의 경우 구성할 수 있습니다:

  • linePointStyle: 데이터 포인트를 채워진 원 또는 빈 원으로 표시
  • lineSmooth: 직선 대신 부드러운 곡선을 활성화
  • lineAreaAlpha: 채워진 영역의 불투명도를 제어(면적 차트만 해당)

막대 차트 기능

막대 차트의 경우 구성할 수 있습니다:

  • barOrientation: 막대를 수직 또는 수평으로 표시
  • barCornerRadius: 막대의 모서리를 둥글게 처리
  • showBarBackground: 막대 뒤에 배경 표시
  • barBackgroundColor/barBackgroundAlpha: 막대 배경 스타일

범례 구성

차트 범례를 활성화하고 사용자 정의합니다:

  • showLegend: 범례 가시성 전환
  • legendPosition: 범례 위치(현재는 "bottom" 지원)
  • legendItemSize: 범례 색상 표시기의 크기
  • legendGap: 범례 항목 간 간격
chartElement.json
{
"id": "chart-element-id",
"type": "Chart",
"start": 0,
"duration": 10,
"trackIndex": 0,
"x": 100,
"y": 100,
"chartType": "bar",
"chartWidth": 800,
"chartHeight": 600,
"bgColor": "#ffffff",
"bgAlpha": 1,
"showAxis": true,
"axisColor": "#000000",
"axisWidth": 2,
"showGrid": true,
"gridColor": "#cccccc",
"gridAlpha": 0.5,
"showLabels": true,
"labelStyle": {
  "fill": "#333333",
  "fontSize": 12,
  "fontFamily": "Arial",
  "fontWeight": "normal",
  "stroke": "#000000",
  "strokeThickness": 0,
  "dropShadow": false,
  "dropShadowColor": "#000000",
  "dropShadowBlur": 4,
  "dropShadowDistance": 3,
  "dropShadowAngle": 1.2,
  "dropShadowAlpha": 1
},
"showLegend": true,
"legendPosition": "bottom",
"legendItemSize": 14,
"legendGap": 8,
"barOrientation": "vertical",
"barCornerRadius": 4,
"showBarBackground": false,
"barBackgroundColor": "#eeeeee",
"barBackgroundAlpha": 0.4,
"dataSet": [
  {
    "dataTime": 0,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 10, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 20, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 15, "color": "#ffce56" }
    ]
  },
  {
    "dataTime": 5,
    "dataPoints": [
      { "id": "1", "label": "A", "value": 25, "color": "#ff6384" },
      { "id": "2", "label": "B", "value": 18, "color": "#36a2eb" },
      { "id": "3", "label": "C", "value": 22, "color": "#ffce56" }
    ]
  }
]
}