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

혼합 차트

혼합 차트는 두 개 이상의 차트 유형을 하나의 차트에 결합하여 사용자가 데이터를 더 쉽게 해석하고 이해할 수 있도록 도와줍니다. 이 차트는 완전히 다른 유형의 데이터(예: 가격과 거래량 등)를 시각화하거나, 하나 이상의 데이터 시리즈를 보조 축에 표시해야 할 때 이상적입니다.

워크시트의 열 또는 행에 정렬된 데이터를 혼합 차트로 플롯할 수 있습니다. 혼합 차트는 두 가지 방법으로 생성할 수 있습니다: 1) 열 차트를 생성한 후, 2) 시리즈를 추가하고 해당 시리즈의 차트 유형을 설정하는 방식입니다. 예를 들어, 선 차트를 추가하는 방식입니다.

아래 예제에서는 남성과 여성의 월간 등록 수와 분포(서로 다른 유형의 데이터)를 혼합 차트를 사용하여 나타내고 있습니다.



다음 코드 샘플은 워크시트에 혼합 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

//Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
//activesheet 가져오기
var activeSheet = spread.getSheet(0);

//데이터 준비
var dataArray = [
    ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    ["MEN", 327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
    ["WOMEN", 709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
    ["TOTAL", 1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
];
activeSheet.setArray(0, 0, dataArray);
var chartType = [{
    type: GC.Spread.Sheets.Charts.ChartType.columnClusterd,
    comboType: GC.Spread.Sheets.Charts.ChartType.lineMarkers
}];

//혼합 차트 추가
var chart = activeSheet.charts.add('ComboChart', chartType[0].type, 10, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
chart.title({ text: "Monthly Registration Number and Distribution of Men and Women" });
var seriesItem = {};
seriesItem.chartType = chartType[0].comboType;
seriesItem.border = { width: 3 };
seriesItem.name = 'A4';
seriesItem.xValues = 'B1:M1';
seriesItem.yValues = 'B4:M4';
chart.series().add(seriesItem);

var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.above;
chart.dataLabels(dataLabels);

혼합 차트를 활용한 게이지 차트 생성

게이지 차트는 여러 구간으로 나뉜 눈금에 대해 단일 값을 시각적으로 나타내는 데이터 시각화 도구입니다. 이 차트는 바늘을 사용하여 값을 표시하며, 설정된 기준에 대한 KPI 성과를 빠르게 시각화하는 데 유용합니다. 게이지 차트는 진행 상태 정보, 목표 지표, 프로젝트 마감일 등을 표시할 때 매우 효과적입니다.

SpreadJS에서는 Excel과 마찬가지로, 도넛 차트와 원형 차트를 결합한 혼합 차트를 사용하여 게이지 차트를 만들 수 있습니다.

gauge-chart

다음 샘플 코드는 SpreadJS에서 게이지 차트를 생성하는 방법을 보여줍니다.

var spread;
window.onload = function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
        sheetCount: 1
    });
    initSpread(spread);
};
function initSpread(spread) {
    var sheets = spread.sheets;
    spread.suspendPaint();
    var sheet1 = sheets[0];

    initsheet1(sheet1);
    var chart2 = initChart(sheet1, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
    chart2.title({
        text: "Annual Performance"
    });
    adjustDoughnutSeries(chart2);
    addPieSeries(chart2)
    spread.resumePaint();
}
function initsheet1(sheet) {
    var dataArray1 = [
        ['Performance Label', 'Value'],
        ["Poor", 20],
        ["Average", 50],
        ["Good", 20],
        ["Excellent", 10],
        ["Total", 100],
    ];
    sheet.setArray(0, 0, dataArray1);

    var dataArray2 = [
        ["Labels", "Values"],
        ["Pointer", 65],
        ["Thickness", 2],
        ["Rest", 154],
    ];
    sheet.setArray(0, 6, dataArray2);
    sheet.setFormula(3, 7, "=200-H2-H3");
    sheet.name("Annual Performance");
}
function initChart(sheet, type) {
    //차트 추가
    let chart = sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 600, 340, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
    return chart

}
function adjustDoughnutSeries(chart) {
    let doughnutSeries1 = chart.series().get(0);
    doughnutSeries1.startAngle = 270;
	doughnutSeries1.doughnutHoleSize = 0.5;
    var dataLabels = doughnutSeries1.dataLabels || {};
    dataLabels.showCategoryName = true
    var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
    dataLabels.position = dataLabelPosition.outsideEnd;
    doughnutSeries1.dataPoints[0] = {
        backColor: "rgb(192,0,0)"
    }
    doughnutSeries1.dataPoints[1] = {
        backColor: "rgb(255,255,0)"
    }
    doughnutSeries1.dataPoints[2] = {
        backColor: "rgb(68,144,96)"
    }
    doughnutSeries1.dataPoints[3] = {
        backColor: "rgb(112,173,71)"
    }
    doughnutSeries1.dataPoints[4] = {
        backColor: ""
    }
    chart.series().set(0, doughnutSeries1);

    var legend = chart.legend();
    legend.visible = false;
    chart.legend(legend);
}

function addPieSeries(chart) {
    var pieSeries = {};
    pieSeries.chartType = GC.Spread.Sheets.Charts.ChartType.pie;
    pieSeries.name = 'G1';
    pieSeries.xValues = 'G2:G4';
    pieSeries.yValues = 'H2:H4';
    pieSeries.axisGroup = GC.Spread.Sheets.Charts.AxisGroup.secondary;
    pieSeries.startAngle = 270;
    pieSeries.dataPoints = {
        0: {
            backColor: "",
        },
        1: {
            backColor: "red",
        },
        2: {
            backColor: "",
        },
    }
    chart.series().add(pieSeries);
}