Stock Volume.
PRO가격과 동일한 시간축의 거래량을 표시합니다.
LIVE EXAMPLE
거래량
차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.
옵션변경 사항이 미리보기와 코드에 반영됩니다.
표현과 스타일2
제목과 크기2
가격과 동일한 시간 데이터로 거래량을 표시합니다. 모든 값은 예시 데이터입니다.
코드 보기
현재 미리보기
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-stock-chart.js';
import { defineCustomElement as define1 } from '@syidax/advanced-pro/components/sy-stock-volume.js';
define0();
define1();
// Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
// 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
const specs = [
{
"tag": "sy-stock-chart",
"id": "price-chart",
"props": {
"data": [
{
"time": 1767225600000,
"open": 100,
"close": 95,
"high": 103,
"low": 92,
"volume": 1200
},
{
"time": 1767312000000,
"open": 104,
"close": 106,
"high": 109,
"low": 101,
"volume": 1337
},
{
"time": 1767398400000,
"open": 107,
"close": 105,
"high": 110,
"low": 102,
"volume": 1474
},
{
"time": 1767484800000,
"open": 109,
"close": 114,
"high": 117,
"low": 106,
"volume": 1611
},
{
"time": 1767571200000,
"open": 108,
"close": 109,
"high": 112,
"low": 105,
"volume": 1748
},
{
"time": 1767657600000,
"open": 106,
"close": 103,
"high": 109,
"low": 100,
"volume": 1885
},
{
"time": 1767744000000,
"open": 102,
"close": 106,
"high": 109,
"low": 99,
"volume": 2022
},
{
"time": 1767830400000,
"open": 100,
"close": 100,
"high": 103,
"low": 97,
"volume": 2159
},
{
"time": 1767916800000,
"open": 98,
"close": 94,
"high": 101,
"low": 91,
"volume": 2296
},
{
"time": 1768003200000,
"open": 99,
"close": 102,
"high": 105,
"low": 96,
"volume": 2433
},
{
"time": 1768089600000,
"open": 101,
"close": 100,
"high": 104,
"low": 97,
"volume": 2570
},
{
"time": 1768176000000,
"open": 105,
"close": 100,
"high": 108,
"low": 97,
"volume": 2707
},
{
"time": 1768262400000,
"open": 109,
"close": 111,
"high": 114,
"low": 106,
"volume": 2844
},
{
"time": 1768348800000,
"open": 113,
"close": 111,
"high": 116,
"low": 108,
"volume": 2981
},
{
"time": 1768435200000,
"open": 115,
"close": 120,
"high": 123,
"low": 112,
"volume": 1318
},
{
"time": 1768521600000,
"open": 115,
"close": 116,
"high": 119,
"low": 112,
"volume": 1455
},
{
"time": 1768608000000,
"open": 114,
"close": 111,
"high": 117,
"low": 108,
"volume": 1592
},
{
"time": 1768694400000,
"open": 111,
"close": 115,
"high": 118,
"low": 108,
"volume": 1729
},
{
"time": 1768780800000,
"open": 108,
"close": 108,
"high": 111,
"low": 105,
"volume": 1866
},
{
"time": 1768867200000,
"open": 105,
"close": 101,
"high": 108,
"low": 98,
"volume": 2003
},
{
"time": 1768953600000,
"open": 105,
"close": 108,
"high": 111,
"low": 102,
"volume": 2140
},
{
"time": 1769040000000,
"open": 107,
"close": 106,
"high": 110,
"low": 103,
"volume": 2277
},
{
"time": 1769126400000,
"open": 110,
"close": 105,
"high": 113,
"low": 102,
"volume": 2414
},
{
"time": 1769212800000,
"open": 114,
"close": 116,
"high": 119,
"low": 111,
"volume": 2551
},
{
"time": 1769299200000,
"open": 119,
"close": 117,
"high": 122,
"low": 114,
"volume": 2688
},
{
"time": 1769385600000,
"open": 121,
"close": 126,
"high": 129,
"low": 118,
"volume": 2825
},
{
"time": 1769472000000,
"open": 123,
"close": 124,
"high": 127,
"low": 120,
"volume": 2962
},
{
"time": 1769558400000,
"open": 121,
"close": 118,
"high": 124,
"low": 115,
"volume": 1299
},
{
"time": 1769644800000,
"open": 119,
"close": 123,
"high": 126,
"low": 116,
"volume": 1436
},
{
"time": 1769731200000,
"open": 116,
"close": 116,
"high": 119,
"low": 113,
"volume": 1573
},
{
"time": 1769817600000,
"open": 113,
"close": 109,
"high": 116,
"low": 106,
"volume": 1710
},
{
"time": 1769904000000,
"open": 112,
"close": 115,
"high": 118,
"low": 109,
"volume": 1847
}
],
"session": "24x7",
"showNavigator": false,
"showRangeSelector": false,
"height": 250,
"width": 640
}
},
{
"id": "example-chart",
"tag": "sy-stock-volume",
"props": {
"data": [
{
"time": 1767225600000,
"open": 100,
"close": 95,
"high": 103,
"low": 92,
"volume": 1200
},
{
"time": 1767312000000,
"open": 104,
"close": 106,
"high": 109,
"low": 101,
"volume": 1337
},
{
"time": 1767398400000,
"open": 107,
"close": 105,
"high": 110,
"low": 102,
"volume": 1474
},
{
"time": 1767484800000,
"open": 109,
"close": 114,
"high": 117,
"low": 106,
"volume": 1611
},
{
"time": 1767571200000,
"open": 108,
"close": 109,
"high": 112,
"low": 105,
"volume": 1748
},
{
"time": 1767657600000,
"open": 106,
"close": 103,
"high": 109,
"low": 100,
"volume": 1885
},
{
"time": 1767744000000,
"open": 102,
"close": 106,
"high": 109,
"low": 99,
"volume": 2022
},
{
"time": 1767830400000,
"open": 100,
"close": 100,
"high": 103,
"low": 97,
"volume": 2159
},
{
"time": 1767916800000,
"open": 98,
"close": 94,
"high": 101,
"low": 91,
"volume": 2296
},
{
"time": 1768003200000,
"open": 99,
"close": 102,
"high": 105,
"low": 96,
"volume": 2433
},
{
"time": 1768089600000,
"open": 101,
"close": 100,
"high": 104,
"low": 97,
"volume": 2570
},
{
"time": 1768176000000,
"open": 105,
"close": 100,
"high": 108,
"low": 97,
"volume": 2707
},
{
"time": 1768262400000,
"open": 109,
"close": 111,
"high": 114,
"low": 106,
"volume": 2844
},
{
"time": 1768348800000,
"open": 113,
"close": 111,
"high": 116,
"low": 108,
"volume": 2981
},
{
"time": 1768435200000,
"open": 115,
"close": 120,
"high": 123,
"low": 112,
"volume": 1318
},
{
"time": 1768521600000,
"open": 115,
"close": 116,
"high": 119,
"low": 112,
"volume": 1455
},
{
"time": 1768608000000,
"open": 114,
"close": 111,
"high": 117,
"low": 108,
"volume": 1592
},
{
"time": 1768694400000,
"open": 111,
"close": 115,
"high": 118,
"low": 108,
"volume": 1729
},
{
"time": 1768780800000,
"open": 108,
"close": 108,
"high": 111,
"low": 105,
"volume": 1866
},
{
"time": 1768867200000,
"open": 105,
"close": 101,
"high": 108,
"low": 98,
"volume": 2003
},
{
"time": 1768953600000,
"open": 105,
"close": 108,
"high": 111,
"low": 102,
"volume": 2140
},
{
"time": 1769040000000,
"open": 107,
"close": 106,
"high": 110,
"low": 103,
"volume": 2277
},
{
"time": 1769126400000,
"open": 110,
"close": 105,
"high": 113,
"low": 102,
"volume": 2414
},
{
"time": 1769212800000,
"open": 114,
"close": 116,
"high": 119,
"low": 111,
"volume": 2551
},
{
"time": 1769299200000,
"open": 119,
"close": 117,
"high": 122,
"low": 114,
"volume": 2688
},
{
"time": 1769385600000,
"open": 121,
"close": 126,
"high": 129,
"low": 118,
"volume": 2825
},
{
"time": 1769472000000,
"open": 123,
"close": 124,
"high": 127,
"low": 120,
"volume": 2962
},
{
"time": 1769558400000,
"open": 121,
"close": 118,
"high": 124,
"low": 115,
"volume": 1299
},
{
"time": 1769644800000,
"open": 119,
"close": 123,
"high": 126,
"low": 116,
"volume": 1436
},
{
"time": 1769731200000,
"open": 116,
"close": 116,
"high": 119,
"low": 113,
"volume": 1573
},
{
"time": 1769817600000,
"open": 113,
"close": 109,
"high": 116,
"low": 106,
"volume": 1710
},
{
"time": 1769904000000,
"open": 112,
"close": 115,
"high": 118,
"low": 109,
"volume": 1847
}
],
"session": "24x7",
"width": 640,
"height": 160,
"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', 'stock-volume 예제 차트');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('rendered', event.detail);
};
chart.addEventListener('rendered', onEvent);
const onRange = event => {
chart.visibleFrom = event.detail.from;
chart.visibleTo = event.detail.to;
};
elements[0].addEventListener('visibleRangeChanged', onRange);
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('rendered', onEvent);
elements[0].removeEventListener('visibleRangeChanged', onRange);
container.replaceChildren();
}
</script>사용과 데이터
#가격 패널 아래의 거래 활동을 비교하세요.
가격과 거래량의 데이터·세션·visibleFrom/visibleTo를 같이 갱신해야 시간축이 일치합니다.
데이터 계약
| 프로퍼티 | 입력 형식 |
|---|---|
data | 가격과 같은 OHLCV 배열. volume이 거래량입니다. |
visibleFrom | 표시할 시간 범위의 시작입니다. |
visibleTo | 표시할 시간 범위의 끝입니다. |
데이터를 갱신할 때
배열 안의 값을 직접 바꾸기보다 새 배열·객체를 프로퍼티에 할당하세요. 차트의 이벤트는 event.detail로 선택 결과를 전달합니다. 화면을 해제할 때 ResizeObserver와 앱에서 등록한 이벤트 리스너를 정리하세요.
기능별 예제
#4개의 기능 예제를 직접 조작하고 코드를 확인하세요. ‘미리보기에서 편집’을 누르면 위 설정 패널에서 옵션을 더 조합할 수 있습니다.
상승·하락 거래량PRO
가격 방향에 따라 거래량 색을 구분합니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
OverviewPRO
Overview의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
DashboardPRO
Dashboard의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
Streaming · 거래량 갱신PRO
새 시점의 가격 데이터와 거래량·이벤트를 함께 갱신합니다. 최근 32개 시점을 유지하며 시작·일시정지·초기화를 조작할 수 있습니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
화면에 적용하기
#미리보기 아래 코드 탭에서 현재 예제의 전체 데이터, 옵션, 이벤트 연결과 반응형 크기 처리를 확인하고 복사할 수 있습니다. 설치된 패키지를 해석할 수 있는 Vite 등의 앱 프로젝트에서 사용하세요.
보조 컴포넌트는 예제처럼 대상 차트·공통 데이터와 연결하세요.
API 레퍼런스
#sy-stock-volume의 전체 공개 API입니다. 객체와 배열은 JavaScript 프로퍼티로 전달하세요. 이름을 선택하면 적용 코드와 타입 계약을 확인할 수 있습니다.
주요 속성
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
number기본값 760 | 차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다. | |
number기본값 160 | 차트의 높이(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, 화면과 이미지 내보내기에 동일하게 적용됩니다. |
StockDataInput기본값 undefined | 가격과 같은 OHLCV 배열. volume이 거래량입니다. | |
| visibleFrom | number기본값 undefined | 표시할 시간 범위의 시작입니다. |
| visibleTo | number기본값 undefined | 표시할 시간 범위의 끝입니다. |
| upColor | string기본값 'rgba(22, 163, 74, 0.55)' | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string. |
| downColor | string기본값 'rgba(220, 38, 38, 0.55)' | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string. |
| chartTitle | string기본값 undefined | 차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요. |
나머지 속성 1
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
'24x7' | 'us-equity' | StockSessionInput기본값 '24x7' | 허용값: 24x7, us-equity. 기본값: '24x7'. |
이벤트 1
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
{ bars: number; maxVolume: number } | 차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다. |
메서드 1
Stencil 메서드는 Promise를 반환합니다. async 함수에서 await로 결과를 받으세요.
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
| data: StockDataInput | Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. |
일치하는 API가 없습니다.