Heatmap.

PRO

두 좌표에 대응하는 값을 색으로 표시합니다.

<sy-heatmap>설치와 연결 API reference

LIVE EXAMPLE

격자 측정

페이지 테마에 맞춰 표시

차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.

각 셀의 x·y 좌표와 value를 색으로 표시합니다. 모든 값은 예시 데이터입니다.

코드 보기

현재 미리보기

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-heatmap.js';
  define0();

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-heatmap",
      "props": {
        "data": [
          {
            "x": 0,
            "y": 0,
            "value": 10
          },
          {
            "x": 1,
            "y": 0,
            "value": 27
          },
          {
            "x": 2,
            "y": 0,
            "value": 44
          },
          {
            "x": 3,
            "y": 0,
            "value": 61
          },
          {
            "x": 4,
            "y": 0,
            "value": 78
          },
          {
            "x": 5,
            "y": 0,
            "value": 95
          },
          {
            "x": 0,
            "y": 1,
            "value": 22
          },
          {
            "x": 1,
            "y": 1,
            "value": 39
          },
          {
            "x": 2,
            "y": 1,
            "value": 56
          },
          {
            "x": 3,
            "y": 1,
            "value": 73
          },
          {
            "x": 4,
            "y": 1,
            "value": 90
          },
          {
            "x": 5,
            "y": 1,
            "value": 17
          },
          {
            "x": 0,
            "y": 2,
            "value": 34
          },
          {
            "x": 1,
            "y": 2,
            "value": 51
          },
          {
            "x": 2,
            "y": 2,
            "value": 68
          },
          {
            "x": 3,
            "y": 2,
            "value": 85
          },
          {
            "x": 4,
            "y": 2,
            "value": 12
          },
          {
            "x": 5,
            "y": 2,
            "value": 29
          },
          {
            "x": 0,
            "y": 3,
            "value": 46
          },
          {
            "x": 1,
            "y": 3,
            "value": 63
          },
          {
            "x": 2,
            "y": 3,
            "value": 80
          },
          {
            "x": 3,
            "y": 3,
            "value": 97
          },
          {
            "x": 4,
            "y": 3,
            "value": 24
          },
          {
            "x": 5,
            "y": 3,
            "value": 41
          },
          {
            "x": 0,
            "y": 4,
            "value": 58
          },
          {
            "x": 1,
            "y": 4,
            "value": 75
          },
          {
            "x": 2,
            "y": 4,
            "value": 92
          },
          {
            "x": 3,
            "y": 4,
            "value": 19
          },
          {
            "x": 4,
            "y": 4,
            "value": 36
          },
          {
            "x": 5,
            "y": 4,
            "value": 53
          }
        ],
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'heatmap 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

사용과 데이터

시간·제품·센서 위치 등 행렬의 패턴을 탐색하세요.

색만으로 정확한 수치를 읽기 어렵습니다. 범례와 툴팁·표를 제공하세요.

데이터 계약

프로퍼티	입력 형식
`data`	{ x, y, value } 배열입니다. x·y는 수치 또는 범주 좌표입니다.

데이터를 갱신할 때

배열 안의 값을 직접 바꾸기보다 새 배열·객체를 프로퍼티에 할당하세요. 차트의 이벤트는 event.detail로 선택 결과를 전달합니다. 화면을 해제할 때 ResizeObserver와 앱에서 등록한 이벤트 리스너를 정리하세요.

기능별 예제

20개의 기능 예제를 직접 조작하고 코드를 확인하세요. ‘미리보기에서 편집’을 누르면 위 설정 패널에서 옵션을 더 조합할 수 있습니다.

셀 간격과 모서리PRO

둥근 셀과 간격으로 개별 측정값을 구분합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

셀 외곽선PRO

셀의 경계를 선으로 표시합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

포인터와 값 확인PRO

데이터를 가리키면 해당 지점의 값을 확인할 수 있습니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

십자선 추적PRO

포인터를 움직여 가로·세로 좌표와 값을 함께 읽습니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

드래그 확대와 이동PRO

드래그로 확대하고 Shift를 누른 채 이동합니다. Ctrl + 휠로 확대하거나 축소할 수 있습니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

애니메이션 재생PRO

같은 예제를 다시 그려 초기 표시 애니메이션을 확인합니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

애니메이션PRO

애니메이션의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

AxisPRO

Axis의 5가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

십자선PRO

십자선의 5가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

데이터 입력PRO

데이터 입력의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

대용량 데이터PRO

대용량 데이터의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

크기PRO

크기의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

툴팁PRO

툴팁의 13가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

Visual mapPRO

Visual map의 3가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

확대와 이동PRO

확대와 이동의 6가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

컨텍스트 메뉴PRO

컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

데이터 컨텍스트 메뉴PRO

데이터 컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

좌표와 데이터 조회PRO

좌표와 데이터 조회의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

OverviewPRO

Overview의 5가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

Streaming · 실시간 데이터 추가와 갱신PRO

실시간 데이터 추가와 갱신의 5가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.

차트를 조작하면 결과 값이 여기에 표시됩니다.

코드 보기

API 레퍼런스

sy-heatmap의 전체 공개 API입니다. 객체와 배열은 JavaScript 프로퍼티로 전달하세요. 이름을 선택하면 적용 코드와 타입 계약을 확인할 수 있습니다.

주요 속성

속성 / 프로퍼티	타입 / 기본값	설명
	`HeatmapData`기본값 undefined	{ x, y, value } 배열입니다. x·y는 수치 또는 범주 좌표입니다.
	`number`기본값 640	차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다.
	`number`기본값 400	차트의 높이(px).
brandLogo	`string`기본값 undefined	기본값은 Syidax 로고입니다. Pro의 chart.branding 권한으로 none 또는 PNG·JPEG·WebP data URL을 사용할 수 있습니다.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`기본값 'bottom-right'	로고를 고정할 코너입니다. Community·Pro, 화면과 이미지 내보내기에 동일하게 적용됩니다.
emptyColor	`string`기본값 'transparent'	The colour of an empty cell (default transparent — the host background shows).
cellGap	`number`기본값 0	Gap between cells in CSS px.
cellRadius	`number`기본값 0	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
cellBorder	`number`기본값 0	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
cellBorderColor	`string`기본값 'rgba(17,24,39,0.35)'	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
	`HeatmapLodMode`기본값 'auto'	허용값: auto, point, area, smooth. 기본값: 'auto'.
areaReduce	`'mean' \| 'max'`기본값 'mean'	허용값: max, mean. 기본값: 'mean'.
xAxis	`CartesianAxisInput`기본값 undefined	허용값: auto, off. 기본값: undefined.
yAxis	`YAxisInput`기본값 undefined	One y axis (the row category axis), or a slot array `[rows, …]` — later slots mirror the rows or carry a numeric `kind` of their own.
gridLines	`CartesianGridLinesInput`기본값 undefined	Grid lines default OFF (the cells tile the plot).
	`CartesianCrosshairInput`기본값 undefined	Crosshair that follows the cursor across the plot.
	`CartesianZoomInput`기본값 undefined	확대·축소와 표시 범위의 동작 설정입니다.
chartTitle	`string`기본값 undefined	차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
chartSubtitle	`string`기본값 undefined	차트 내부 부제목입니다.
	`CartesianTooltipInput`기본값 undefined	포인터에 따라 표시할 값, 위치, 내용의 툴팁 설정입니다.
tooltipEnabled	`boolean`기본값 true	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
animated	`boolean`기본값 false	초기 표시와 데이터 변경의 애니메이션 사용 여부입니다.
animationDuration	`number`기본값 600	애니메이션 지속 시간(ms).
animationEasing	`HeatmapEasing`기본값 'ease-out'	허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'.
animationType	`HeatmapAnimationType`기본값 undefined	허용값: initial, update. 기본값: undefined.

나머지 속성 15

속성 / 프로퍼티	타입 / 기본값	설명
	`HeatmapMatrixInput`기본값 undefined	A dense matrix: `{ columns, rows, values }` (row-major) or rows of columns.
xCategories	`HeatmapCategoriesInput`기본값 undefined	Column labels (array, or a comma list attribute). Given explicitly, they fix the column count.
yCategories	`HeatmapCategoriesInput`기본값 undefined	Row labels (row 0 is the top row).
	`HeatmapColorInput`기본값 undefined	The colour ramp: a scheme name (`viridis`, `blues`, …), a colour list / comma list, or `[t, colour]` stops.
valueMin	`number`기본값 undefined	Domain ends; an omitted end follows the data extent.
valueMax	`number`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
renderPath	`HeatmapRenderPath`기본값 'auto'	허용값: auto, plane, cells. 기본값: 'auto'.
enableMouseTracking	`boolean`기본값 true	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
tooltipFormat	`(detail: HeatmapPointEventDetail) => string`기본값 undefined	JavaScript 프로퍼티로 전달합니다. 타입: (detail: HeatmapPointEventDetail) => string.
streamSource	`HeatmapStreamSource`기본값 undefined	실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.
streamMax	`number`기본값 undefined	보관할 스트리밍 데이터의 최대 수입니다.
streamWindow	`number`기본값 undefined	화면에 유지할 스트리밍 데이터 구간입니다.
visualMap	`VisualMapBinding \| null`기본값 undefined	JavaScript 프로퍼티로 전달합니다. 타입: VisualMapBinding \| null.
	`HeatmapEngineMode`기본값 'auto'	auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.
	`HeatmapUnavailableBehaviour`기본값 'fallback'	`fallback` shows the on-chart notice when the renderer cannot run; `error` throws.

이벤트 14

이벤트	detail 타입	설명
	`HeatmapRenderResult & { tier: HeatmapEngineTier; engine?: ChartEngineStatus }`	차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
	`HeatmapPointEventDetail`	점 선택 이벤트입니다. CustomEvent.detail에서 선택한 데이터와 인덱스를 읽습니다.
	`HeatmapPointEventDetail \| null`	CustomEvent.detail 타입: HeatmapPointEventDetail \| null. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianCrosshairEventDetail \| null`	CustomEvent.detail 타입: CartesianCrosshairEventDetail \| null. 이벤트 이름은 대소문자를 구분합니다.
	`ChartPointContextMenuEventDetail<HeatmapPointEventDetail>`	CustomEvent.detail 타입: ChartPointContextMenuEventDetail<HeatmapPointEventDetail>. 이벤트 이름은 대소문자를 구분합니다.
	`{ count: number }`	CustomEvent.detail 타입: { count: number }. 이벤트 이름은 대소문자를 구분합니다.
	`{ dropped: number }`	CustomEvent.detail 타입: { dropped: number }. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianTooltipEventDetail`	내장 툴팁 표시 여부입니다.
	`void`	CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianTooltipActionEventDetail`	CustomEvent.detail 타입: CartesianTooltipActionEventDetail. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianZoomChangeEventDetail`	Zoom — every zoom / pan change (drag, keyboard, wheel, pinch, API, reset); `null` zoom = the full extent.

메서드 33

Stencil 메서드는 Promise를 반환합니다. async 함수에서 await로 결과를 받으세요.

메서드 / 인수	반환 타입	설명
	`Promise<ChartDataTable>`	Current normalized table, including the retained stream; independent of GPU availability.
	`Promise<HeatmapRenderResult>`	Draws a frame now; rejects with the SyidaxLicenseError while the type is not entitled or the chart is frozen.
	`Promise<HeatmapEngineTier>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<string \| undefined>`	The reason the renderer cannot run (`undefined` while it runs).
data: HeatmapData	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
matrix: HeatmapMatrixInput	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cell: HeatmapDatum \| HeatmapTuple	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cells: ReadonlyArray<HeatmapDatum \| HeatmapTuple>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
count: number	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cells: ReadonlyArray<HeatmapDatum \| HeatmapTuple>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<HeatmapStreamSource \| undefined>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
options: { duration?: number; easing?: HeatmapEasing; enabled?: boolean; type?: HeatmapAnimationType }	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
col: number, row: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
index: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
col: number, row: number	`Promise<HeatmapPointEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cssX: number, cssY: number	`Promise<HeatmapPointEventDetail \| null>`	The cell under host-relative CSS coordinates (inside the plot, through the zoomed matrix), or null.
col: number, row: number	`Promise<number \| null>`	The value of a cell (`null` when empty or outside the grid).
	`Promise<HeatmapValueExtent \| null>`	Min / max / finite count of the current values (`null` when nothing is finite).
	`Promise<{ columns: number; rows: number; cells: number }>`	Columns × rows of the current grid.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	Zoom to explicit windows in index units: `x` / `y` as `{ min, max }` or `[min, max]` (`null` clears that orientation).
factor: number, anchorFraction?: number	`Promise<CartesianZoomChangeEventDetail \| null>`	Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).
delta: { x?: number; y?: number }	`Promise<CartesianZoomChangeEventDetail \| null>`	Slide the zoomed windows by index units (`{ x?, y? }`); a no-op at the full extent.
	`Promise<CartesianZoomChangeEventDetail \| null>`	Back to the full matrix.
	`Promise<CartesianZoomState \| null>`	The current zoom state (`null` = the full extent).
request?: CartesianZoomExtentRequest	`Promise<CartesianZoomExtentDetail \| null>`	The full extent (and key) of the primary — or the named — axes: `-0.5 … columns - 0.5` / `-0.5 … rows - 0.5`.
binding: VisualMapBinding \| null	`Promise<VisualMapBinding \| null>`	Bind (or clear) a visual map: every cell is coloured through it on the next frame.
	`Promise<VisualMapBinding \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
request?: VisualMapExtentRequest	`Promise<VisualMapExtent \| null>`	The extent a bound `sy-visual-map` adopts as its domain: the finite cell values (`value`), or the index ranges (`x` = columns, `y` = rows, `index` = cells).
	`Promise<ChartEngineStatus>`	Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

Heatmap.

격자 측정

사용과 데이터

데이터 계약

데이터를 갱신할 때

기능별 예제

화면에 적용하기

API 레퍼런스

주요 속성