[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

캔들스틱 차트

캔들스틱 차트는 거래 구간별 가격 변동을 표시합니다. 각 캔들스틱은 하나의 범주 항목을 나타내며, open, high, low, close의 네 가지 값을 시각화합니다.

이 차트 유형은 시장 방향, 변동성 및 단기 가격 움직임을 분석하기 위해 금융 애플리케이션에서 널리 사용됩니다.

image

값 구성

캔들스틱 차트에는 각 데이터 포인트에 대해 네 개의 숫자 필드가 필요합니다.

  • open

  • high

  • low

  • close

권장 구성은 vectors 구조를 사용하여 이러한 필드를 단일 값 그룹으로 바인딩하는 것입니다.

values: [{
  vectors: {
    open:  { field: "open" },
    high:  { field: "high" },
    low:   { field: "low" },
    close: { field: "close" }
  }
}]

올바른 해석을 보장하려면 필드를 open → high → low → close의 논리적 순서로 바인딩하세요.

이러한 필드를 별도의 값 항목으로 바인딩하는 레거시 구성도 계속 지원됩니다.

범주 구성

캔들스틱 차트는 단일 수준 및 계층형 범주 바인딩을 모두 지원합니다.

예제(계층형 바인딩):

category: {
  field: "month",
  child: {
    field: "day"
  }
}

단일 범주 필드만 제공된 경우 차트는 단일 수준 범주 축을 사용합니다.

코드 사용

다음 예제는 OHLC 필드를 바인딩하고 범주 축을 Month > Day 기준으로 그룹화하여 캔들스틱 차트를 생성합니다.

const sheet = spread.getActiveSheet();
sheet.name("Candlestick Chart");
const dataManager = spread.dataManager();

function createStockTable(dataManager) {
    return dataManager.addTable("Stock", {
        data: [
            // September - uptrend
            { month: "Sep", day: "01", open: 100, high: 105, low: 98,  close: 104 },
            { month: "Sep", day: "02", open: 104, high: 110, low: 103, close: 108 },
            { month: "Sep", day: "03", open: 108, high: 112, low: 106, close: 111 },
            { month: "Sep", day: "04", open: 111, high: 115, low: 109, close: 113 },
            { month: "Sep", day: "05", open: 113, high: 118, low: 112, close: 117 },
            { month: "Sep", day: "08", open: 117, high: 125, low: 116, close: 123 },
            { month: "Sep", day: "09", open: 123, high: 130, low: 121, close: 128 },
            { month: "Sep", day: "10", open: 128, high: 135, low: 126, close: 132 },

            // October - pullback then recovery
            { month: "Oct", day: "01", open: 132, high: 134, low: 125, close: 127 },
            { month: "Oct", day: "02", open: 127, high: 129, low: 120, close: 122 },
            { month: "Oct", day: "03", open: 122, high: 124, low: 118, close: 119 },
            { month: "Oct", day: "04", open: 119, high: 123, low: 117, close: 121 },
            { month: "Oct", day: "05", open: 121, high: 128, low: 120, close: 126 },
            { month: "Oct", day: "08", open: 126, high: 133, low: 125, close: 131 },
            { month: "Oct", day: "09", open: 131, high: 138, low: 130, close: 136 },
            { month: "Oct", day: "10", open: 136, high: 142, low: 134, close: 140 }
        ]
    });
}

const stockTable = createStockTable(dataManager);
await stockTable.fetch();

const dataChart = sheet.dataCharts.add("candlestickChart", 10, 10, 700, 400);

dataChart.setChartConfig({
    tableName: "Stock",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.candlestick,
        encodings: {
            values: [{
                vectors: {
                    open: { field: "open" },
                    high: { field: "high" },
                    low: { field: "low" },
                    close: { field: "close" }
                }
            }],
            category: {
                field: "month",
                child: {
                    field: "day"
                }
            }
        },
        config: {
            palette: ["#2ECC71", "#E74C3C"]
        }
    }],
    config: {
        header: {
            title: "Daily Stock Prices"
        }
    }
});

image-20260402.c44312.png