주요 이벤트

Understanding Common Highcharts Events (Highcharts 주요 이벤트 이해하기) Highcharts는 차트와 그 구성 요소에 인터랙티비티(interactivity)와 커스텀 동작을 추가할 수 있는 유연한 이벤트 시스템을 제공합니다. 이 가이드는 Highcharts에서 가장 일반적이고

기타 (템플릿, 반응형 차트)

Templating (템플릿) Highcharts는 포맷 문자열에서 템플릿을 지원합니다. v11.1(2023)부터 템플릿은 논리 연산을 [지원](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#format-strings)하며, 설정이 보안 및 JSON 호환이

Highcharts 이해하기 (title, series, tooltip, legend, axes)

Highcharts 이해하기 Highcharts가 어떻게 동작하는지 이해하려면 차트의 다양한 구성 요소, 즉 개념들을 이해하는 것이 중요합니다. 아래 이미지는 차트의 주요 개념들을 설명합니다.

How to set options

How to set options (옵션 설정 방법) Highcharts는 JavaScript 객체 구조를 사용하여 차트의 옵션 또는 설정을 정의합니다. 이 문서는 옵션 객체가 어떻게 동작하는지, 그리고 어떻게 사용하는지를 설명합니다.

Installation

Highcharts 초기 설정 방법 공식 문서 기준으로 설치/로딩 방법은 크게 5가지입니다. 1. npm (권장 — 실무 표준) React/Vue/Angular 등 모던 프레임워크 환경에서는 이 방식이 기본입니다. npm install highcharts // ES Module 방식 import Highcharts from

Events - Sharing, Viewability, Volume

Sharing Events 공유(Sharing) API 호출은 getPlugin() 메서드와 함께 동작합니다. 예를 들어, 모든 공유 인스턴스는 이 특정 플러그인을 참조하기 위해 getPlugin("sharing") API 호출을 사용합니다. 다음 예시는 공유 플러그인을 대상으로 합니다:

Events - Seek

Seek Events 이 API 호출은 현재 미디어의 재생 위치(playback position) 를 조회하거나 업데이트하는 데 사용됩니다. .on("absolutePositionReady") .getAbsolutePosition() 메서드가 데이터를 반환할 준비가 되었을 때 트리거됩니다.

Events - Quality, Related, Resize

Quality Events 이 API 호출은 여러 화질(quality level) 이 제공되는 비디오에서 현재 화질을 감지하거나 변경할 때 사용됩니다. > 인덱스 0은 항상 “Auto(자동)” 를 의미합니다. .on("levels") 사용 가능한 화질 수준 목록이 업데이트될 때 트리거됩니다.

Events - Playlist

Playlist Events 이 API 호출은 플레이리스트(하나 이상의 항목) 를 불러오거나 조회하고, 플레이리스트 항목 간을 탐색할 때 사용됩니다. API를 통해 접근할 때, 플레이리스트는 하나 이상의 객체를 포함하는 배열(Array) 형태로 제공됩니다. 각 객체에는 다음과 같은 속성이 포함됩니다.

Events - Playback

Playback Events 이 API 호출은 플레이어의 현재 재생 상태를 가져오거나 변경하는 데 사용됩니다. .on("autostartNotAllowed") 플레이어가 자동 재생(autostart) 으로 설정되어 있지만, 브라우저 설정으로 인해 자동 재생이 차단될 때 트리거됩니다.