Spectrogram.
PRO시간에 따른 주파수별 세기를 색으로 표시합니다.
LIVE EXAMPLE
시간·주파수
차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.
옵션변경 사항이 미리보기와 코드에 반영됩니다.
표현과 스타일4
축과 격자11
범례와 상호작용13
제목과 크기3
프레임별 주파수 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가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
화면에 적용하기
#미리보기 아래 코드 탭에서 현재 예제의 전체 데이터, 옵션, 이벤트 연결과 반응형 크기 처리를 확인하고 복사할 수 있습니다. 설치된 패키지를 해석할 수 있는 Vite 등의 앱 프로젝트에서 사용하세요.
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. |
일치하는 API가 없습니다.