Spectrogram.

PRO

시간에 따른 주파수별 세기를 색으로 표시합니다.

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

LIVE EXAMPLE

시간·주파수

페이지 테마에 맞춰 표시

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

프레임별 주파수 bin의 세기를 색으로 표시합니다. 모든 값은 예시 데이터입니다.

코드 보기

현재 미리보기

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

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

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-spectrogram",
      "props": {
        "data": [
          [0, 0, 0.19999999999999996, 0.4, 0.6, 0.8, 1, 0.8, 0.6, 0.4, 0.19999999999999996, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0.04106453536395094, 0.2410645353639509, 0.44106453536395096, 0.6410645353639509, 0.841064535363951, 0.9589354646360491, 0.7589354646360491, 0.558935464636049, 0.3589354646360491, 0.15893546463604902, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0.08846532615307956, 0.2884653261530795, 0.4884653261530796, 0.6884653261530795, 0.8884653261530795, 0.9115346738469204, 0.7115346738469205, 0.5115346738469204, 0.31153467384692046, 0.1115346738469205, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.14828602128397184, 0.3482860212839718, 0.5482860212839717, 0.7482860212839718, 0.9482860212839718, 0.8517139787160282, 0.6517139787160282, 0.45171397871602825, 0.2517139787160282, 0.05171397871602823, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.0261151272803819, 0.22611512728038186, 0.4261151272803818, 0.6261151272803819, 0.8261151272803818, 0.9738848727196181, 0.7738848727196181, 0.5738848727196182, 0.3738848727196181, 0.17388487271961817, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.12682321215368264, 0.3268232121536826, 0.5268232121536827, 0.7268232121536826, 0.9268232121536826, 0.8731767878463174, 0.6731767878463174, 0.47317678784631734, 0.2731767878463174, 0.07317678784631743, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.05436873122621899, 0.25436873122621895, 0.454368731226219, 0.654368731226219, 0.8543687312262189, 0.945631268773781, 0.745631268773781, 0.545631268773781, 0.34563126877378103, 0.14563126877378108, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.011640216009231708, 0.21164021600923166, 0.41164021600923173, 0.6116402160092317, 0.8116402160092318, 0.9883597839907683, 0.7883597839907683, 0.5883597839907683, 0.3883597839907683, 0.18835978399076825, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.0003411175667960009, 0.20034111756679596, 0.400341117566796, 0.600341117566796, 0.800341117566796, 0.999658882433204, 0.799658882433204, 0.599658882433204, 0.399658882433204, 0.19965888243320395, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.020921895297443927, 0.22092189529744388, 0.42092189529744384, 0.6209218952974439, 0.8209218952974439, 0.9790781047025561, 0.7790781047025561, 0.5790781047025562, 0.3790781047025561, 0.17907810470255614, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.07256205853945441, 0.2725620585394545, 0.47256205853945443, 0.6725620585394545, 0.8725620585394545, 0.9274379414605456, 0.7274379414605455, 0.5274379414605456, 0.3274379414605455, 0.12743794146054555, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.15320287694432788, 0.35320287694432795, 0.5532028769443279, 0.753202876944328, 0.9532028769443279, 0.8467971230556721, 0.646797123055672, 0.4467971230556721, 0.24679712305567203, 0.046797123055672074, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.0596294555590795, 0.25962945555907946, 0.4596294555590795, 0.6596294555590795, 0.8596294555590795, 0.9403705444409205, 0.7403705444409205, 0.5403705444409205, 0.3403705444409205, 0.14037054444092045, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.18759890254282863, 0.3875989025428286, 0.5875989025428285, 0.7875989025428286, 0.9875989025428286, 0.8124010974571714, 0.6124010974571714, 0.41240109745717146, 0.2124010974571714, 0.01240109745717144, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0.13200947987527623, 0.3320094798752763, 0.5320094798752762, 0.7320094798752763, 0.9320094798752763, 0.8679905201247238, 0.6679905201247237, 0.46799052012472375, 0.2679905201247237, 0.06799052012472373, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0.0871039935521063, 0.28710399355210625, 0.4871039935521063, 0.6871039935521063, 0.8871039935521063, 0.9128960064478937, 0.7128960064478937, 0.5128960064478937, 0.3128960064478937, 0.11289600644789366, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0.046699314742064124, 0.2466993147420642, 0.44669931474206415, 0.6466993147420641, 0.8466993147420642, 0.9533006852579359, 0.7533006852579358, 0.5533006852579359, 0.3533006852579359, 0.15330068525793583, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.004432881621465379, 0.20443288162146533, 0.4044328816214653, 0.6044328816214654, 0.8044328816214653, 0.9955671183785346, 0.7955671183785347, 0.5955671183785347, 0.39556711837853464, 0.1955671183785347, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.15401635463588192, 0.3540163546358819, 0.554016354635882, 0.7540163546358819, 0.954016354635882, 0.8459836453641181, 0.6459836453641181, 0.44598364536411805, 0.2459836453641181, 0.04598364536411803, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.28948631275417536, 0.4894863127541754, 0.6894863127541754, 0.8894863127541754, 0.9105136872458246, 0.7105136872458246, 0.5105136872458246, 0.3105136872458246, 0.11051368724582455, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4054419962463426, 0.6054419962463425, 0.8054419962463426, 0.9945580037536574, 0.7945580037536575, 0.5945580037536574, 0.39455800375365746, 0.1945580037536574, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4972606179308705, 0.6972606179308706, 0.8972606179308705, 0.9027393820691294, 0.7027393820691294, 0.5027393820691295, 0.3027393820691294, 0.10273938206912947, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5612816591116129, 0.7612816591116129, 0.9612816591116129, 0.8387183408883871, 0.6387183408883871, 0.4387183408883871, 0.23871834088838706, 0.038718340888387104, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5949528029067717, 0.7949528029067716, 0.9949528029067716, 0.8050471970932284, 0.6050471970932284, 0.40504719709322834, 0.20504719709322838, 0.005047197093228428, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5969316870686725, 0.7969316870686725, 0.9969316870686724, 0.8030683129313275, 0.6030683129313276, 0.4030683129313275, 0.20306831293132754, 0.003068312931327477, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5671394197305107, 0.7671394197305108, 0.9671394197305108, 0.8328605802694893, 0.6328605802694892, 0.43286058026948926, 0.2328605802694892, 0.032860580269489126, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5067637245761225, 0.7067637245761225, 0.9067637245761225, 0.8932362754238775, 0.6932362754238774, 0.4932362754238775, 0.29323627542387753, 0.09323627542387736, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4182115900447897, 0.6182115900447898, 0.8182115900447897, 0.9817884099552103, 0.7817884099552103, 0.5817884099552103, 0.38178840995521024, 0.18178840995521028, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.3050133102978567, 0.5050133102978567, 0.7050133102978566, 0.9050133102978567, 0.8949866897021433, 0.6949866897021433, 0.4949866897021433, 0.29498668970214337, 0.0949866897021433, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.17168174353100518, 0.37168174353100514, 0.5716817435310052, 0.7716817435310052, 0.9716817435310052, 0.8283182564689948, 0.6283182564689949, 0.4283182564689948, 0.22831825646899484, 0.028318256468994774, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.023532398559140688, 0.22353239855914064, 0.4235323985591407, 0.6235323985591407, 0.8235323985591407, 0.9764676014408593, 0.7764676014408594, 0.5764676014408593, 0.37646760144085933, 0.17646760144085927, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0.0664715222539971, 0.2664715222539972, 0.46647152225399713, 0.6664715222539972, 0.8664715222539972, 0.9335284777460029, 0.7335284777460028, 0.5335284777460029, 0.3335284777460028, 0.13352847774600285, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ],
        "valueScale": "linear",
        "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', 'spectrogram 예제 차트');
    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>

사용과 데이터

오디오·진동·신호의 주파수 패턴을 확인하세요.

시간 간격·주파수 간격·선형 또는 dB 척도를 명시하세요. 예제는 이미 계산된 주파수 프레임입니다.

데이터 계약

프로퍼티	입력 형식
`data`	바깥 배열은 시간 프레임, 각 내부 배열은 주파수 bin의 세기입니다.
`valueScale`	linear 또는 db 척도입니다.

데이터를 갱신할 때

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

기능별 예제

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

데시벨 입력PRO

진폭을 -60–0 dB로 변환한 데이터를 전달해 약한 성분과 강한 성분을 비교합니다.

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

코드 보기

최댓값 집계PRO

촘촘한 1,024개 프레임을 화면에 축약할 때 좁은 신호의 최댓값을 남깁니다.

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

코드 보기

포인터와 값 확인PRO

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

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

코드 보기

십자선 추적PRO

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

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

코드 보기

드래그 확대와 이동PRO

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

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

코드 보기

애니메이션 재생PRO

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

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

코드 보기

애니메이션PRO

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

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

코드 보기

AxisPRO

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

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

코드 보기

ColorPRO

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

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

코드 보기

십자선PRO

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

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

코드 보기

데이터 입력PRO

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

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

코드 보기

FFTPRO

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

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

코드 보기

대용량 데이터PRO

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

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

코드 보기

크기PRO

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

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

코드 보기

툴팁PRO

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

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

코드 보기

확대와 이동PRO

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

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

코드 보기

컨텍스트 메뉴PRO

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

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

코드 보기

데이터 컨텍스트 메뉴PRO

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

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

코드 보기

좌표와 데이터 조회PRO

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

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

코드 보기

OverviewPRO

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

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

코드 보기

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

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

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

코드 보기

API 레퍼런스

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

주요 속성

속성 / 프로퍼티	타입 / 기본값	설명
	`SpectrogramInput`기본값 undefined	바깥 배열은 시간 프레임, 각 내부 배열은 주파수 bin의 세기입니다.
	`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, 화면과 이미지 내보내기에 동일하게 적용됩니다.
valueScale	`SpectrogramValueScale`기본값 'db'	linear 또는 db 척도입니다.
dbFloor	`number`기본값 SPECTROGRAM_DEFAULT_DB_FLOOR	The dB a zero magnitude reads (the linear scale).
	`SpectrogramLodMode`기본값 'auto'	The plane's level of detail: `auto` (area-folded once a frame or bin is under a device px — the usual case), `point`, `area`, `smooth`.
areaReduce	`'mean' \| 'max'`기본값 'max'	허용값: max, mean. 기본값: 'max'.
xAxis	`CartesianAxisInput`기본값 undefined	허용값: auto, off. 기본값: undefined.
yAxis	`YAxisInput`기본값 undefined	One y axis, or a slot array `[left, right, …]` — a later slot may carry its own `min` / `max` (Hz left, kHz right), a `position`, a `linkedTo` or a numeric `kind` (`linear` / `log` / `time`); every visible slot renders in the overlay.
gridLines	`CartesianGridLinesInput`기본값 undefined	Grid lines default OFF (the plane tiles 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	`SpectrogramEasing`기본값 'ease-out'	허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'.
animationType	`SpectrogramAnimationType`기본값 undefined	허용값: initial, update. 기본값: undefined.

나머지 속성 21

속성 / 프로퍼티	타입 / 기본값	설명
sampleRate	`number`기본값 undefined	The sampling rate in Hz: the frequency axis then spans 0 … sampleRate / 2 (unless `freq-min` / `freq-max` say otherwise).
freqMin	`number`기본값 undefined	The frequency axis ends in Hz (default 0 … sampleRate / 2, else 0 … bins as bin indexes).
freqMax	`number`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
hopSeconds	`number`기본값 1	Seconds per frame (the hop).
timeOrigin	`number`기본값 0	Seconds at the first frame of the data (the window's drops advance it).
	`ArrayLike<number>`기본값 undefined	Raw samples (a property; ignored while `data` is set): the FFT pipeline frames them into dB.
fftSize	`number`기본값 1024	The FFT size, a power of two (default 1,024): bins = fft-size / 2 and each bin is sample-rate / fft-size wide.
fftHop	`number`기본값 undefined	Samples between frame starts (default fft-size / 2).
fftWindow	`SpectrogramWindowKind`기본값 'hann'	The analysis window: `hann` (default), `hamming`, `blackman`, `rect`.
	`string \| ReadonlyArray<string> \| ReadonlyArray<readonly [number, string]>`기본값 undefined	The colour ramp over the dB domain (a scheme name, a colour list / comma list, or `[t, colour]` stops).
valueMin	`number`기본값 undefined	Domain ends in dB; an omitted end follows the data (the min never more than 80 dB under the max).
valueMax	`number`기본값 undefined	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
emptyColor	`string`기본값 'transparent'	The colour of an empty cell — transparent by default.
enableMouseTracking	`boolean`기본값 true	HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
tooltipFormat	`(detail: SpectrogramPointEventDetail) => string`기본값 undefined	JavaScript 프로퍼티로 전달합니다. 타입: (detail: SpectrogramPointEventDetail) => string.
streamSource	`SpectrogramStreamSource`기본값 undefined	실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.
streamMax	`number`기본값 undefined	보관할 스트리밍 데이터의 최대 수입니다.
streamWindow	`number`기본값 undefined	화면에 유지할 스트리밍 데이터 구간입니다.
visualMap	`VisualMapBinding \| null`기본값 undefined	A visual-map binding (a `sy-visual-map` snapshot + dimension); it overrides `colors` / `value-min` / `value-max` while bound.
	`SpectrogramEngineMode`기본값 'auto'	auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.
	`SpectrogramUnavailableBehaviour`기본값 'fallback'	`fallback` shows the on-chart notice when the renderer cannot run; `error` throws.

이벤트 14

이벤트	detail 타입	설명
	`SpectrogramRenderResult & { tier: SpectrogramEngineTier; engine?: ChartEngineStatus }`	차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
	`SpectrogramPointEventDetail`	점 선택 이벤트입니다. CustomEvent.detail에서 선택한 데이터와 인덱스를 읽습니다.
	`SpectrogramPointEventDetail \| null`	CustomEvent.detail 타입: SpectrogramPointEventDetail \| null. 이벤트 이름은 대소문자를 구분합니다.
	`CartesianCrosshairEventDetail \| null`	CustomEvent.detail 타입: CartesianCrosshairEventDetail \| null. 이벤트 이름은 대소문자를 구분합니다.
	`ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>`	CustomEvent.detail 타입: ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>. 이벤트 이름은 대소문자를 구분합니다.
	`{ 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.

메서드 35

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

메서드 / 인수	반환 타입	설명
	`Promise<ChartDataTable>`	Current normalized table, including the retained stream; independent of GPU availability.
	`Promise<SpectrogramRenderResult>`	Draws a frame now; rejects with the SyidaxLicenseError while the type is not entitled or the chart is frozen.
	`Promise<SpectrogramEngineTier>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<string \| undefined>`	The reason the renderer cannot run (`undefined` while it runs).
data: SpectrogramInput	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
frame: SpectrogramFrame	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
frames: ReadonlyArray<SpectrogramFrame>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
count: number	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
frames: ReadonlyArray<SpectrogramFrame>	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<SpectrogramStreamSource \| undefined>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
options: { duration?: number; easing?: SpectrogramEasing; enabled?: boolean; type?: SpectrogramAnimationType }	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
cssX: number, cssY: number	`Promise<SpectrogramPointEventDetail \| null>`	The cell under host-relative CSS coordinates, or null.
frame: number, bin: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
index: number	`Promise<CartesianTooltipEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<void>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
frame: number, bin: number	`Promise<SpectrogramPointEventDetail \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
frame: number, bin: number	`Promise<number \| null>`	The dB value of a cell (`null` when empty or outside the grid).
	`Promise<SpectrogramValueExtent \| null>`	The dB extent of the plane (min / max over the finite cells).
	`Promise<{ frames: number; bins: number; cells: number; dropped: number }>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<SpectrogramRanges>`	The time and frequency ranges the plane spans.
samples: ArrayLike<number>	`Promise<SpectrogramAppendSamplesResult>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
	`Promise<SpectrogramFftInfo>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
binding: VisualMapBinding \| null	`Promise<VisualMapBinding \| null>`	Bind (or clear with null) a visual-map snapshot; it wins over the `visualMap` prop until the prop changes again.
	`Promise<VisualMapBinding \| null>`	비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
request?: VisualMapExtentRequest	`Promise<VisualMapExtent \| null>`	The extent of a dimension: `value` = dB, `x` = time (s), `y` = frequency (Hz), `index` = the cell indexes.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	Zoom to explicit windows in axis units: `x` (seconds) / `y` (Hz) 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 axis units (`{ x?: seconds, y?: Hz }`); a no-op at the full extent.
	`Promise<CartesianZoomChangeEventDetail \| null>`	Back to the whole plane.
	`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: the time span in seconds, the frequency span in Hz.
	`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.

Spectrogram.

시간·주파수

사용과 데이터

데이터 계약

데이터를 갱신할 때

기능별 예제

화면에 적용하기

API 레퍼런스

주요 속성