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

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

OHLC 데이터 차트(시가–고가–저가–종가)는 특정 기간 동안 자산의 가격 변동을 나타내는 전문적인 데이터 시각화 기능입니다. 일간, 주간, 월간 추세를 관찰하기 위해 금융 및 주식 시장 애플리케이션에서 널리 사용됩니다.

image

OHLC 차트의 각 막대는 네 가지 가격 정보를 표시합니다:

  • 시가(Open) – 구간 시작 시점의 초기 가격

  • 고가(High) – 구간 동안 달성한 최고 가격

  • 저가(Low) – 구간 동안 도달한 최저 가격

  • 종가(Close) – 구간 종료 시점의 최종 가격

OHLC 차트를 통해 사용자는 가격 변동을 시각화하고, 시장 패턴을 식별하며, 거래 성과를 분석할 수 있습니다.

데이터 형식 및 필드 규칙

지원 값: OHLC 차트는 데이터 포인트당 3개 또는 4개의 숫자 값을 허용합니다.

  • 4‑값 모드: [open, high, low, close]

  • 3‑값 모드: [high, low, close]

집계(Aggregation): OHLC 값에는 집계 함수를 사용할 수 없습니다.

  • 시가(Open): 시리즈의 첫 번째 값을 사용

  • 고가(High): 최대 값을 나타냄

  • 저가(Low): 최소 값을 나타냄

  • 종가(Close): 마지막 값을 사용

호버 애니메이션은 지원되지 않습니다.

차트는 유효하고 형식이 올바른 입력 데이터를 가정합니다.

코드 사용 예제

사용자 정의 데이터셋에서 두 개의 주식형 데이터 차트(OHLC와 HLC)를 생성합니다.

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

function createStockTable(dataManager) {
    return dataManager.addTable("Stock", {
        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 StockTable = createStockTable(dataManager);
await StockTable.fetch();

// OHLC 데이터 차트 생성
const dataChart1 = sheet.dataCharts.add('data-chart1', 10, 10, 600, 400);
const dataChart2 = sheet.dataCharts.add('data-chart2', 10, 420, 600, 400);

dataChart1.setChartConfig({
                tableName: 'Stock',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
                        encodings: {
                            values: [
                                        { field: 'open' },
                                        { field: 'high' },
                                        { field: 'low' },
                                        { field: 'close' },
                                    ],
                            category: { field: 'date' },
                        },
                    }
                ],
                config: {
                    header: {
                        title: "일일 주식 가격 – OHLC (4‑값 모드)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: 18
                        }
                    }
                }
        });

dataChart2.setChartConfig({
                tableName: 'Stock',
                plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.ohlc,
                        encodings: {
                            values: [
                                        { field: 'high' },
                                        { field: 'low' },
                                        { field: 'close' },
                                    ],
                            category: { field: 'date' },
                        },
                        config: {
                            palette: ['#FFB74D'],   
                            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: {
                    dvStyle: {
                        fill: { type: 'CssColor', color: '#0f2233' },
                    },
                    header: {
                        title: "일일 주식 가격 – HLC (3‑값 모드)",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: '#D7E3F4',
                            fontSize: 18
                        }
                    }
                }
        });

image