- SpreadJS 개요
- 시작하기
- JavaScript 프레임워크
- 모범 사례
- 기능
- SpreadJS 템플릿 디자이너
- 튜토리얼
- SpreadJS 디자이너 컴포넌트
- SpreadJS 동시 작업 서버
- 터치 지원
- 수식 참조
- 가져오기 및 내보내기 참조
- 자주 사용하는 이벤트
- API 문서
- 릴리스 노트
캔들스틱 차트
캔들스틱 차트는 특정 기간 동안 자산의 가격 변동을 시각화하는 도구입니다. 주식, 외환 등 금융 데이터 분석에서 널리 사용되며, 시가(Open), 고가(High), 저가(Low), 종가(Close, OHLC) 값을 한눈에 보여주어 시장 동향을 파악할 수 있습니다.
각 캔들스틱 차트 요소는 하나의 기간(예: 일, 주, 월)을 나타내며, 구성 요소는 다음과 같습니다.
시가(Open) – 거래 기간이 시작될 때의 가격
고가(High) – 거래 기간 중 최고 가격
저가(Low) – 거래 기간 중 최저 가격
종가(Close) – 거래 기간이 끝날 때의 가격
캔들스틱 차트는 GC.Spread.Sheets.DataCharts API를 통해 사용자 정의 스타일, 색상, 표시 옵션을 적용해 대화형 시각화가 가능합니다.
데이터 형식 및 필드 규칙
지원 값: 각 데이터 포인트마다 숫자형 4개 필드를 [open, high, low, close] 순서로 제공해야 합니다.
필드 동작:
Open: 시리즈의 첫 번째 값 사용
High: 최대값
Low: 최소값
Close: 마지막 값
차트는 유효하고 올바르게 포맷된 데이터를 전제로 합니다.
참고:
네 필드를 모두 제공해야 하며, 누락 시 차트가 표시되지 않습니다.
팔레트에는 상승 색상과 하락 색상 최소 두 가지가 포함되어야 합니다.
필드가 누락되거나 유효하지 않으면 차트가 올바르게 표시되지 않을 수 있습니다.
코드 사용 예제
아래 샘플은 단일 가격 시리즈와 OHLC 데이터 두 가지를 준비하여 비교용 캔들스틱 차트를 생성합니다.
const sheet = spread.getActiveSheet();
sheet.name("캔들스틱 차트");
const dataManager = spread.dataManager();
function createStockTablebyPrice(dataManager) {
return dataManager.addTable("Stock1", {
data: [
{ date: "2025-09-01", price: 105 },
{ date: "2025-09-01", price: 95 },
{ date: "2025-09-01", price: 120 },
{ date: "2025-09-01", price: 110 },
{ date: "2025-09-01", price: 115 },
{ date: "2025-09-02", price: 115 },
{ date: "2025-09-02", price: 110 },
{ date: "2025-09-02", price: 122 },
{ date: "2025-09-02", price: 125 },
{ date: "2025-09-02", price: 120 },
{ date: "2025-09-03", price: 120 },
{ date: "2025-09-03", price: 125 },
{ date: "2025-09-03", price: 118 },
{ date: "2025-09-03", price: 110 },
{ date: "2025-09-03", price: 115 },
{ date: "2025-09-04", price: 115 },
{ date: "2025-09-04", price: 110 },
{ date: "2025-09-04", price: 118 },
{ date: "2025-09-04", price: 108 },
{ date: "2025-09-04", price: 110 },
{ date: "2025-09-05", price: 110 },
{ date: "2025-09-05", price: 115 },
{ date: "2025-09-05", price: 105 },
{ date: "2025-09-05", price: 107 },
{ date: "2025-09-05", price: 108 },
{ date: "2025-09-08", price: 110 },
{ date: "2025-09-08", price: 120 },
{ date: "2025-09-08", price: 130 },
{ date: "2025-09-08", price: 125 },
{ date: "2025-09-08", price: 128 },
{ date: "2025-09-09", price: 128 },
{ date: "2025-09-09", price: 125 },
{ date: "2025-09-09", price: 133 },
{ date: "2025-09-09", price: 131 },
{ date: "2025-09-09", price: 132 },
{ date: "2025-09-10", price: 132 },
{ date: "2025-09-10", price: 133 },
{ date: "2025-09-10", price: 135 },
{ date: "2025-09-10", price: 130 },
{ date: "2025-09-10", price: 134 },
{ date: "2025-09-11", price: 134 },
{ date: "2025-09-11", price: 125 },
{ date: "2025-09-11", price: 135 },
{ date: "2025-09-11", price: 130 },
{ date: "2025-09-11", price: 128 },
{ date: "2025-09-12", price: 128 },
{ date: "2025-09-12", price: 126 },
{ date: "2025-09-12", price: 120 },
{ date: "2025-09-12", price: 130 },
{ date: "2025-09-12", price: 122 },
],
});
}
const StockTable1 = createStockTablebyPrice(dataManager);
await StockTable1.fetch();
function createStockTablebyOHLC(dataManager) {
return dataManager.addTable("Stock2", {
data: [
{
date: "2025-09-01",
open: 105,
high: 120,
low: 95,
close: 115,
},
{
date: "2025-09-02",
open: 115,
high: 125,
low: 110,
close: 120,
},
{
date: "2025-09-03",
open: 120,
high: 125,
low: 110,
close: 115,
},
{
date: "2025-09-04",
open: 115,
high: 118,
low: 108,
close: 110,
},
{
date: "2025-09-05",
open: 110,
high: 115,
low: 105,
close: 108,
},
{
date: "2025-09-08",
open: 110,
high: 130,
low: 110,
close: 128,
},
{
date: "2025-09-09",
open: 128,
high: 133,
low: 125,
close: 132,
},
{
date: "2025-09-10",
open: 132,
high: 135,
low: 130,
close: 134,
},
{
date: "2025-09-11",
open: 134,
high: 135,
low: 125,
close: 128,
},
{
date: "2025-09-12",
open: 128,
high: 130,
low: 120,
close: 122,
},
],
});
}
const StockTable2 = createStockTablebyOHLC(dataManager);
await StockTable2.fetch();
// OHLC 캔들스틱 차트 생성
const dataChart1 = sheet.dataCharts.add('data-chart1', 10, 10, 700, 400);
const dataChart2 = sheet.dataCharts.add('data-chart2', 10, 420, 700, 400);
dataChart1.setChartConfig({
tableName: 'Stock1',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.candlestick,
encodings: {
values: [
// 시가
{ field: 'price' },
// 고가
{ field: 'price' },
// 저가
{ field: 'price' },
// 종가
{ field: 'price' },
],
category: { field: 'date' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontFamily: 'Calibri',
fontSize: 12,
fontWeight: 'Lighter',
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
color: '#333333',
},
}]
}
}
],
config: {
header: {
title: "캔들스틱 차트 (단일 가격 시리즈)",
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
color: 'black',
fontSize: 24
}
}
}
});
dataChart2.setChartConfig({
tableName: 'Stock2',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.candlestick,
encodings: {
values: [
{ field: 'open' },
{ field: 'high' },
{ field: 'low' },
{ field: 'close' },
],
category: { field: 'date' },
},
config: {
palette: ['#E74C3C','#2ECC71']
},
}
],
config: {
dvStyle: {
fill: { type: 'CssColor', color: '#0f2233' },
},
header: {
title: "캔들스틱 차트 (OHLC 데이터)",
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
color: '#D7E3F4',
fontSize: 24
}
}
}
});