TreemapChart (트리맵차트) Widget Control

TreemapChart(트리맵차트) 위젯을 스크립트에서 제어할 때 사용하는 Widget Control(Property · Method · Event) 목록입니다. 위젯 소개와 사용법은 TreemapChart 문서를 참고하세요.

정보

아래 예시의 treemapchartID는 캔버스에서 TreemapChart 위젯에 지정한 이름(ID)입니다. 스크립트에서는 위젯ID.멤버 형태로 접근합니다.

Widget Control 요약

Widget Control	종류	시그니처	설명
setData	Method	setData(data)	트리맵/히트맵 데이터를 교체하고 차트를 다시 그림
setCurrency	Method	setCurrency(unit)	거래대금·시가총액 표시 통화 단위 설정('원' / '달러')
setStops	Method	setStops(jsonString)	JSON으로 색상 테마(양수/음수 색 구간 등)를 덮어씀
setTooltipFields	Method	setTooltipFields(jsonString)	항목 툴팁에 표시할 필드를 구성
setGroupSummaryFields	Method	setGroupSummaryFields(jsonString)	그룹 요약에 표시할 필드를 구성
onItemClick	Event	onItemClick = (code, groupCode) => { ... }	항목(타일)을 클릭했을 때 실행

Property

정보

해당 없음 - TreemapChart 위젯에는 스크립트 전용 Property가 없습니다. 스크립트에서는 아래 공통 Widget Control(getProperty / setProperty)로 값을 읽고 씁니다.

Method

setData

트리맵/히트맵 데이터를 교체하고 차트를 다시 그립니다.

• 종류: Method
• Parameters: data (문자열) - 평면 배열(label, value, colorValue, extras, 선택적 children) 또는 병렬 배열을 담은 컬럼형 객체 형태의 JSON 문자열
• Returns: 없음 (void)

Example

treemapchartID.setData(JSON.stringify([
  { label: "삼성전자", value: 350, colorValue: 2.15, extras: { currentPrice: 72500 } },
  { label: "SK하이닉스", value: 280, colorValue: -1.2 }
]));

setCurrency

거래대금·시가총액 표시에 쓰는 통화 단위를 설정합니다. 선택한 단위에 따라 금액의 단위 표기와 소수 규칙이 달라집니다.

• 종류: Method
• Parameters: unit (문자열) - '원'(원화, 기본) 또는 '달러'(미국 주식)
• Returns: 없음 (void)

Example

treemapchartID.setCurrency("달러");

setStops

JSON 객체로 트리맵 색상 테마를 덮어쓰고, 캐시된 테마·호버 상태를 새로 고칩니다.

• 종류: Method
• Parameters: jsonString (문자열) - 양수/음수 색 구간(stops), 중립 색, 글로우, 툴팁 색 등을 담은 JSON 객체 문자열
• Returns: 없음 (void)

Example

treemapchartID.setStops(JSON.stringify({
  positiveStops: [{ value: 0, color: "#FF1B5E20" }, { value: 3, color: "#FF4CAF50" }],
  negativeStops: [{ value: 0, color: "#FFB71C1C" }, { value: -3, color: "#FFE57373" }],
  zeroColor: "#FF9E9E9E",
  tooltipBgColor: "#FF202020"
}));

setTooltipFields

항목 툴팁에 표시할 필드를 JSON으로 설정합니다.

• 종류: Method
• Parameters: jsonString (문자열) - 필드 명세 JSON 배열. 각 항목은 key, label, format(옵션 객체), useChangeColor를 가집니다. format 옵션: decimals(정수, 기본 0), comma(불리언, 기본 false), sign(불리언, 기본 false), prefix(문자열), suffix(문자열), divisor(숫자, 예 10000)
• Returns: 없음 (void)

Example

treemapchartID.setTooltipFields(JSON.stringify([
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true },
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } }
]));

setGroupSummaryFields

그룹 요약 정보에 표시할 필드를 JSON으로 설정합니다. 형식은 setTooltipFields와 같습니다.

• 종류: Method
• Parameters: jsonString (문자열) - setTooltipFields와 동일한 필드 명세 JSON 배열
• Returns: 없음 (void)

Example

treemapchartID.setGroupSummaryFields(JSON.stringify([
  { key: "currentPrice", label: "현재가", format: { decimals: 0, comma: true } },
  { key: "colorValue", label: "등락률", format: { decimals: 2, sign: true, suffix: "%" }, useChangeColor: true }
]));

Event

onItemClick

차트에서 항목(타일)을 클릭했을 때 실행됩니다. 트리맵·히트맵 모두 공통입니다. 실행할 동작을 콜백 함수로 지정합니다.

• 종류: Event
• Parameters(핸들러 인자): code - 클릭한 종목 코드, groupCode - 속한 그룹 코드(그룹이 없으면 null)
• Returns: 없음

Example

treemapchartID.onItemClick = (code, groupCode) => {
  // 클릭한 항목 처리
};

공통 Widget Control (모든 위젯)

노트

모든 위젯은 setProperty / getProperty / setStyleProperty 같은 이름 기반 공통 Widget Control(Method)을 사용할 수 있습니다. 공통 레퍼런스 문서(작성 예정)를 참고하세요.