HighChart
HighChart(하이차트) 위젯은 Highcharts 라이브러리로 그려지는 인터랙티브 차트를 화면에 표시합니다.
막대·선·게이지 등 다양한 차트를 JSON 정의와 변수로 구성해 데이터를 시각화합니다.
정보
이 위젯은 Free 플랜에서 잠겨 있으며, Pro·Enterprise 플랜에서 사용할 수 있습니다.
정의 / 역할
HighChart 위젯은 내부 웹뷰에 Highcharts 차트를 렌더링합니다. 차트 정의(JSON 옵션)와 변수 목록으로 데이터를 구성하며, 편집 화면에서는 자리표시자 상자로 보이고 실행 시 실제 차트가 그려집니다.
- 카테고리: Contents
- 차트 엔진: Highcharts
기능
| 기능 | 설명 |
|---|---|
| 인터랙티브 차트 | Highcharts 기반 차트를 웹뷰에 그려 표시합니다. |
| 데이터 변수 바인딩 | 차트 정의에 선언한 변수에 데이터를 연결해 값을 채웁니다. |
| 배경색 설정 | 차트 영역의 배경색을 지정합니다. |
| 로딩 표시 | 차트를 불러오는 동안 로딩 인디케이터를 표시할지 설정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- HighChart 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서 차트 데이터(
Highchart Data)를 설정해 표시할 차트를 정의합니다. - 필요하면 배경색(
bgColor)·로딩 표시(showLoadingBar)를 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
bgColor | 차트 영역 배경색 (불투명 RGB만 적용 - 투명도/알파값은 무시됨) | 미지정 | 색상 |
Highchart Data | 차트 정의 데이터 (JSON 옵션 + 변수 목록) | 빈 데이터 | 차트 데이터 |
showLoadingBar | 차트 로딩 중 인디케이터 표시 여부 | false (표시 안 함) | 참/거짓 |
주의 / 팁
팁
차트 데이터에 변수를 선언해 두면 스크립트에서 그 값을 바꿔 차트를 다시 그릴 수 있습니다.
노트
차트를 불러오는 동안 로딩 인디케이터를 보이려면 showLoadingBar를 켜주세요. 기본값이 꺼짐이라 따로 설정하지 않으면 로딩 표시가 나타나지 않습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 HighChart (하이차트) Widget Control 문서에서 확인하세요.