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

주식형 차트

주식형 차트는 데이터의 변동을 시각화하는 데 널리 사용됩니다. 이 차트는 주가, 일일 강수량 또는 연간 기온의 변동을 나타낼 수 있습니다. 일반적으로 이 차트는 재무 데이터를 분석하고 주식 정보를 시각화하는 데 적합합니다.

워크시트의 열 또는 행에 정렬된 데이터를 주식형 차트로 생성할 수 있습니다.

SpreadJS는 다음과 같은 유형의 주식형 차트를 지원합니다. 아래 예제에서는 다양한 시간 간격의 시장 데이터 분석이 서로 다른 유형의 주식형 차트를 통해 나타나 있습니다.

고가 저가 종가 차트

고가-저가-종가 차트는 데이터를 다음 순서로 정렬하여 표시합니다: 1) 고가, 2) 저가, 3) 종가. 종가는 고가와 저가 사이에 위치합니다.

아래 이미지는 고가-저가-종가 차트의 예시입니다:


시가 고가 저가 종가 차트

시가-고가-저가-종가 차트는 데이터를 다음 순서로 정렬하여 표시합니다: 1) 시가, 2) 고가, 3) 저가, 4) 종가.

아래 이미지는 시가-고가-저가-종가 차트의 예시입니다:


거래량 고가 저가 종가 차트

거래량-고가-저가-종가 차트는 데이터를 다음 순서로 정렬하여 표시합니다: 1) 거래량, 2) 고가, 3) 저가, 4) 종가.

아래 이미지는 거래량-고가-저가-종가 차트의 예시입니다:



거래량 시가 고가 저가 종가 차트

거래량-시가-고가-저가-종가 차트는 데이터를 다음 순서로 정렬하여 표시합니다: 1) 거래량, 2) 시가, 3) 고가, 4) 저가, 5) 종가.

아래 이미지는 거래량-시가-고가-저가-종가 차트의 예시입니다:



다음 코드 샘플은 워크시트에 다양한 유형의 주식 차트를 추가하는 방법을 보여줍니다.

var data = dataSource;
function initSpread(spread) {
    spread.suspendPaint();
    spread.options.tabStripRatio = 0.7;

    var chartTypeStr = ['stockHLC', 'stockOHLC', 'stockVHLC', 'stockVOHLC'];
    var chartType = [{
    type: GC.Spread.Sheets.Charts.ChartType.stockHLC,
    desc: chartTypeStr[0],
    }, {
    type: GC.Spread.Sheets.Charts.ChartType.stockOHLC,
    desc: chartTypeStr[1],
    }, {
    type: GC.Spread.Sheets.Charts.ChartType.stockVHLC,
    desc: chartTypeStr[2],
    }, {
    type: GC.Spread.Sheets.Charts.ChartType.stockVOHLC,
    desc: chartTypeStr[3],
    }];

    var sheets = SpreadJS;
    var sheet = sheets[sheets.length - 1];

    sheet.suspendPaint();
    sheet.name(chartTypeStr[chartTypeStr.length - 1]);
    sheet.setArray(0, 0, data);

    sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy');

    sheet.setColumnWidth(0, 80);
    sheet.resumePaint();
    initStockHLCChartSheetData(sheets[0], chartTypeStr[0]);
    initStockOHLCChartSheetData(sheets[1], chartTypeStr[1]);
    initStockVHLCChartSheetData(sheets[2], chartTypeStr[2]);

    for (var i = 0; i < chartType.length; i++) {
        sheet = sheets[i];
        initChart(sheet, chartType[i].type, i);//add chart
    }
    spread.resumePaint();
}

function initStockHLCChartSheetData(sheet, sheetName) {
    sheet.name(sheetName);
    sheet.suspendPaint();

    var formula = "='stockVOHLC'!";
    for (var i = 0; i < data.length - 1; i++) {
    var formula1 = formula + 'A' + (i + 1);
        sheet.setFormula(i, 0, formula1);
        formula1 = formula + 'D' + (i + 1);
        sheet.setFormula(i, 1, formula1);
        formula1 = formula + 'E' + (i + 1);
        sheet.setFormula(i, 2, formula1);
        formula1 = formula + 'F' + (i + 1);
        sheet.setFormula(i, 3, formula1);
    }

    sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy');
    sheet.setColumnWidth(0, 80);
    sheet.resumePaint();
}

function initStockOHLCChartSheetData(sheet, sheetName) {
    sheet.name(sheetName);
    sheet.suspendPaint();

    var formula = "='stockVOHLC'!";
    for (var i = 0; i < data.length - 1; i++) {
        var formula1 = formula + 'A' + (i + 1);
        sheet.setFormula(i, 0, formula1);
        formula1 = formula + 'C' + (i + 1);
        sheet.setFormula(i, 1, formula1);
        formula1 = formula + 'D' + (i + 1);
        sheet.setFormula(i, 2, formula1);
        formula1 = formula + 'E' + (i + 1);
        sheet.setFormula(i, 3, formula1);
        formula1 = formula + 'F' + (i + 1);
        sheet.setFormula(i, 4, formula1);
    }

    sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy');
    sheet.setColumnWidth(0, 80);
    sheet.resumePaint();
}

function initStockVHLCChartSheetData(sheet, sheetName) {
    sheet.name(sheetName);
    sheet.suspendPaint();

    var formula = "='stockVOHLC'!";
    for (var i = 0; i < data.length - 1; i++) {
    var formula1 = formula + 'A' + (i + 1);
        sheet.setFormula(i, 0, formula1);
        formula1 = formula + 'B' + (i + 1);
        sheet.setFormula(i, 1, formula1);
        formula1 = formula + 'D' + (i + 1);
        sheet.setFormula(i, 2, formula1);
        formula1 = formula + 'E' + (i + 1);
        sheet.setFormula(i, 3, formula1);
        formula1 = formula + 'f' + (i + 1);
        sheet.setFormula(i, 4, formula1);
    }

    sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy');
    sheet.setColumnWidth(0, 80);
    sheet.resumePaint();
}

function initChart(sheet, chartType, index) {
    sheet.suspendPaint();
    var rangeIndex = ['A1:D61', 'A1:E61', 'A1:E61', 'A1:F61'];
    //차트 추가
    var chart = sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]);
    sheet.resumePaint();
}