syidaxchart
홈 가격 내 정보
Charts차트 컨트롤

Navigator.

COMMUNITY

전체 데이터의 축약된 흐름 위에서 범위를 고릅니다.

<sy-navigator>설치와 연결 API reference
Live preview기능별 예제 2개

LIVE EXAMPLE

전체 흐름과 확대

페이지 테마에 맞춰 표시
차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.
옵션변경 사항이 미리보기와 코드에 반영됩니다.
표현과 스타일6
제목과 크기1

축약된 데이터 위에서 표시 범위를 선택합니다. 모든 값은 예시 데이터입니다.

코드 보기
현재 미리보기
<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-navigator.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-navigator",
      "props": {
        "for": "chart-target",
        "sampling": "minmax",
        "width": 640,
        "height": 64
      }
    }
  ];
  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', 'navigator 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  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();
    container.replaceChildren();
  }
</script>

사용과 데이터

#

확대된 화면과 전체 맥락을 함께 제공하세요.

Navigator의 for는 같은 문서의 대상 차트를 가리킵니다. 샘플링된 미리보기는 원시 데이터와 구분하세요.

데이터 계약

프로퍼티입력 형식
for대상 차트의 id입니다.
samplingminmax 또는 lttb로 데이터를 축약합니다.
series미리보기에 사용할 시리즈입니다.

데이터를 갱신할 때

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

기능별 예제

#

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

범위 변경 API

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

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

Mini chart

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

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

API 레퍼런스

#

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

주요 속성

속성 / 프로퍼티타입 / 기본값설명
string기본값 undefined대상 차트의 id입니다.
DataZoomOrientation기본값 'horizontal''horizontal' drives the x window (preview along x), 'vertical' the y window (preview along y).
number기본값 640차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다.
number기본값 60차트의 높이(px).
minRangePxnumber기본값 8The narrowest window, in track pixels (default 8).
stepFractionnumber기본값 0.1Fraction of the window one arrow key moves (default 0.1).
showLabelsboolean기본값 trueShow the window's min / max next to the handles while zoomed.
boolean기본값 falseHTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
number | string기본값 undefined미리보기에 사용할 시리즈입니다.
NavigatorSampling기본값 'minmax'minmax 또는 lttb로 데이터를 축약합니다.
나머지 속성 2
속성 / 프로퍼티타입 / 기본값설명
NavigatorTargetElement | null기본값 undefinedThe chart element to drive (the script-set alternative to `for`).
CartesianAxisId기본값 undefinedWhich axis of the target (id or slot index); default: the primary axis of the orientation.
메서드 4

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

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

범위 변경은 내부 Data Zoom의 rangeChange 이벤트로 전달됩니다.

ChartsTab 이동 Enter 열기