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

시가–고가–저가–종가 차트

시가-고가-저가-종가 차트는 시간에 따른 가격 변동을 표시하는 금융 차트입니다. 각 데이터 포인트는 하나의 거래 구간을 나타내며, 채워진 몸통 대신 틱 표시를 사용하여 가격 값을 시각화합니다.

캔들스틱 차트와 비교하면, 시가-고가-저가-종가 차트는 가격 움직임을 보다 간결하게 표현합니다.

image

값 구성

시가-고가-저가-종가 차트는 두 가지 입력 모드를 지원합니다.

시가-고가-저가-종가 모드

네 개의 필드가 필요합니다.

  • open

  • high

  • low

  • close

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

고가-저가-종가 모드

세 개의 필드가 필요합니다.

  • high

  • low

  • close

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

주가 값은 직접 바인딩해야 하며 집계 함수를 사용하면 안 됩니다.

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

범주 구성

시가-고가-저가-종가 차트는 단일 수준 및 계층형 범주 바인딩을 모두 지원합니다.

예제:

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

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

코드 사용

다음 예제는 동일한 데이터 원본에서 두 개의 시가-고가-저가-종가 차트를 생성합니다. 첫 번째 차트는 시가-고가-저가-종가 모드를 사용하고, 두 번째 차트는 고가-저가-종가 모드를 사용합니다. 두 차트 모두 범주 축을 Month > Day 기준으로 그룹화합니다.

const sheet = spread.getActiveSheet();
sheet.name("OHLC 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 dataChart1 = sheet.dataCharts.add("ohlcChart1", 10, 10, 700, 360);
const dataChart2 = sheet.dataCharts.add("ohlcChart2", 10, 390, 700, 360);

dataChart1.setChartConfig({
    tableName: "Stock",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
        encodings: {
            values: [{
                vectors: {
                    open: { field: "open" },
                    high: { field: "high" },
                    low: { field: "low" },
                    close: { field: "close" }
                }
            }],
            category: {
                field: "month",
                child: {
                    field: "day"
                }
            }
        }
    }],
    config: {
        header: {
            title: "Daily Stock Prices - OHLC"
        }
    }
});

dataChart2.setChartConfig({
    tableName: "Stock",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
        encodings: {
            values: [{
                vectors: {
                    high: { field: "high" },
                    low: { field: "low" },
                    close: { field: "close" }
                }
            }],
            category: {
                field: "month",
                child: {
                    field: "day"
                }
            }
        },
        config: {
            palette: ["#FFB74D"]
        }
    }],
    config: {
        header: {
            title: "Daily Stock Prices - HLC"
        }
    }
});

image-20260402.01be9d.png