Data Zoom.

COMMUNITY

대상 차트의 표시 범위를 슬라이더로 바꿉니다.

<sy-data-zoom>설치와 연결 API reference

LIVE EXAMPLE

범위 선택

페이지 테마에 맞춰 표시

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

옵션변경 사항이 미리보기와 코드에 반영됩니다.

표현과 스타일5

방향키보드 이동 비율최소 선택 너비

레이블 표시조작 비활성화

제목과 크기1

차트 높이 (px)

아래 손잡이를 움직여 대상 차트의 X축 범위를 바꿉니다. 모든 값은 예시 데이터입니다.

코드 보기

현재 미리보기

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

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
  import { defineCustomElement as define1 } from '@syidax/advanced/components/sy-data-zoom.js';
  define0();
  define1();

  const specs = [
    {
      "tag": "sy-line-chart",
      "id": "chart-target",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Organic",
            "color": "#8263d9",
            "values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
          },
          {
            "name": "Direct",
            "color": "#239c91",
            "values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
          },
          {
            "name": "Referral",
            "color": "#e99954",
            "values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "zoom": {
          "enabled": true
        },
        "height": 280,
        "width": 640
      }
    },
    {
      "id": "example-chart",
      "tag": "sy-data-zoom",
      "props": {
        "for": "chart-target",
        "showLabels": true,
        "width": 640,
        "height": 36
      }
    }
  ];
  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', 'data-zoom 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('rangeChange', event.detail);
  };
  chart.addEventListener('rangeChange', 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('rangeChange', onEvent);
    container.replaceChildren();
  }
</script>

사용과 데이터

넓은 데이터 범위에서 관심 구간을 선택하게 하세요.

독립 데이터 차트가 아닙니다. 대상 차트와 같은 문서에 두고 for에 고유 id를 지정하세요.

데이터 계약

프로퍼티	입력 형식
`for`	연결할 대상 차트의 id입니다.
`showLabels`	양끝의 범위 레이블 표시 여부입니다.
`axis`	대상의 어떤 축을 제어할지 지정합니다.

데이터를 갱신할 때

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

기능별 예제

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

범위 변경 API

4월부터 9월까지 표시한 뒤 전체 범위로 돌아옵니다.

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

코드 보기

Slider

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

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

코드 보기

API 레퍼런스

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

주요 속성

속성 / 프로퍼티	타입 / 기본값	설명
	`string`기본값 undefined	연결할 대상 차트의 id입니다.
	`DataZoomOrientation`기본값 'horizontal'	'horizontal' drives the x window, 'vertical' the y window.
	`CartesianAxisId`기본값 undefined	대상의 어떤 축을 제어할지 지정합니다.
	`number`기본값 640	차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다.
	`number`기본값 28	차트의 높이(px).
minRangePx	`number`기본값 8	The narrowest window, in track pixels (default 8).
stepFraction	`number`기본값 0.1	Fraction of the window one arrow key moves (default 0.1).
showLabels	`boolean`기본값 true	양끝의 범위 레이블 표시 여부입니다.
	`boolean`기본값 false	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

나머지 속성 2

속성 / 프로퍼티	타입 / 기본값	설명
	`DataZoomTargetElement \| null`기본값 undefined	The chart element to drive (the script-set alternative to `for`).
	`(value: number) => string`기본값 undefined	Label formatter (default: up to two decimals).

이벤트 1

이벤트	detail 타입	설명
	`DataZoomRangeChangeEventDetail`	Every window the slider shows: gestures / keys ('slider'), the chart moving on its own ('chart'), `setWindow` ('api').

메서드 4

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

메서드 / 인수	반환 타입	설명
	`Promise<void>`	Re-read the target's extent and window (the slider also does this on the target's `rendered` and `zoomChange`).
window: CartesianZoomWindow \| readonly [number, number] \| null	`Promise<CartesianZoomWindow \| null>`	Set the window from script (`null` = the full extent); the chart follows with `zoomChange.source = 'api'`.
	`Promise<CartesianZoomWindow \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<ZoomExtent \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

Data Zoom.

범위 선택

사용과 데이터

데이터 계약

데이터를 갱신할 때

기능별 예제

화면에 적용하기

API 레퍼런스

주요 속성