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

세로 막대형 차트

세로 막대형 차트는 데이터를 가로 축 위의 세로 막대를 통해 나타내며, 두 개 이상의 데이터 범주 간의 비교 및 분석에 적합합니다.

워크시트의 열이나 행에 정렬된 데이터를 세로 막대형 차트로 시각화할 수 있습니다.

SpreadJS는 다음 세 가지 유형의 세로 막대형 차트를 지원합니다. 아래 예시에서는 모바일폰, 노트북, 태블릿과 같은 다양한 기기 범주에 대해 1분기(Q1), 2분기(Q2), 3분기(Q3)의 연간 판매 실적을 세 가지 유형의 차트로 나타냅니다.

묶은 세로 막대형 차트

묶은 세로 막대형 차트는 다양한 범주에 걸친 여러 값을 비교하고, 이들을 2D 또는 3D 세로 직사각형으로 표시할 때 사용할 수 있습니다. 일반 차트처럼 수직 방향으로 누적도 가능합니다.

아래 이미지는 묶은 세로 막대형 차트를 보여줍니다.


누적 세로 막대형 차트

누적 세로 막대형 차트는 특정 항목이 전체에 기여하는 관계를 범주별로 보여주며, 값을 2D 또는 3D 세로 직사각형으로 누적하여 표시합니다.

아래 이미지는 누적 세로 막대형 차트를 보여줍니다.


100% 기준 누적 세로 막대형 차트

100% 기준 누적 세로 막대형 차트는 각 값이 전체에서 차지하는 백분율을 비교할 때 사용되며, 모든 값이 100%가 되도록 세로로 누적하여 표시합니다. 이 값들은 2D 또는 3D 직사각형으로 시각화됩니다.

아래 이미지는 100% 기준 누적 세로 막대형 차트를 보여줍니다.



아래 코드는 세 가지 세로 막대형 차트를 워크시트에 추가하는 예제입니다.

var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
        window.onload = function () {        
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            sheet = spread.getActiveSheet();
            sheet.suspendPaint();
            // 차트 데이터 설정
            sheet.setValue(0, 1, "Q1");
            sheet.setValue(0, 2, "Q2");
            sheet.setValue(0, 3, "Q3");
            sheet.setValue(1, 0, "Mobile Phones");
            sheet.setValue(2, 0, "Laptops");
            sheet.setValue(3, 0, "Tablets");
            for (var r = 1; r <= 3; r++) {
                for (var c = 1; c <= 3; c++) {
                    sheet.setValue(r, c, parseInt(Math.random() * 100));
                }
            }
            // 묶은 세로 막대형 차트 추가
            chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4");
            // 누적 세로 막대형 차트 추가
            chart_columnStacked = sheet.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 250, 480, 600, 400, "A1:D4");
            // 100 기준 누적 세로 막대형 차트 추가
            chart_columnStacked100 = sheet.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 250, 900, 600, 400, "A1:D4");
            sheet.resumePaint();
        };

간격 너비 및 겹침 설정

세로 막대형 차트에서 gapWidth 속성을 사용하여 범주 간의 간격 너비를 설정할 수 있습니다. 이 속성의 값은 0부터 5까지 설정 가능하며 기본값은 1입니다.

또한, overlap 속성을 사용하여 동일 범주 내 시리즈 간의 막대 겹침 정도를 설정할 수 있습니다. 값의 범위는 -1에서 1까지이며, -1은 막대 사이에 간격이 생기고, 1은 막대가 완전히 겹치게 됩니다.

아래 이미지는 차트에서 간격 너비와 시리즈 겹침을 적용한 예시입니다.




아래 코드는 간격 너비와 겹침을 설정하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// activesheet 가져오기
var activeSheet = spread.getSheet(0);
// 차트 데이터 준비
var dataArray =
[
    ['Year', 'Actual (00$)', 'Target (00$)'],
    ['2013', 20, 50],
    ['2014', 24, 50],
    ['2015', 34, 50],
    ['2016', 32, 50],
    ['2017', 51, 100],
    ['2018', 62, 100],
    ['2019', 89, 100]

];
//데이터 추가
activeSheet.setArray(0, 0, dataArray);
// 열 표시 및 너비 설정
activeSheet.setColumnWidth(1, 90);
activeSheet.setColumnWidth(2, 90);

//  columnClustered 차트 추가 
chart_colClustured = activeSheet.charts.add('chart_colClustured', GC.Spread.Sheets.Charts.ChartType.columnClustered, 270, 20, 500, 400);
// columnClustured 차트에 시리즈 추가
var series = chart_colClustured.series();
series.add({
    chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
    name: "Sheet1!$C$1",
    xValues: "Sheet1!$A$2:$A$8",
    yValues: "Sheet1!$C$2:$C$8",

});

series.add({
    chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
    axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
    name: "Sheet1!$B$1",
    xValues: "Sheet1!$A$2:$A$8",
    yValues: "Sheet1!$B$2:$B$8"
});

// 차트 그리드라인 숨기기
var gridLinesAxes = chart_colClustured.axes();
gridLinesAxes.primaryCategory.majorGridLine.visible = false;
gridLinesAxes.primaryValue.majorGridLine.visible = false;
chart_colClustured.axes(gridLinesAxes);

// 제목 가져오고 텍스트 설정
var title = chart_colClustured.title();
title.fontSize = "24.00";
title.text = "Yearly Sales Analysis";
chart_colClustured.title(title);

//series(0) 배경색 설정
var seriesItem = chart_colClustured.series().get(0);
seriesItem.backColor = "#A9CCE3";
chart_colClustured.series().set(0, seriesItem);

//series(1) 배경색 설정
var seriesItem = chart_colClustured.series().get(1);
seriesItem.backColor = "#1F618D";
// 시리즈의 GapWidth 설정
seriesItem.gapWidth = 2;
// 시리즈의 겹침 정도를 설정
seriesItem.overlap = 0.6;
chart_colClustured.series().set(1, seriesItem);

// 차트의 데이터 레이블을 설정
chart_colClustured.dataLabels
    ({
        showValue: true,
        color: "black"
    });

// 셀에 스타일을 설정
var style = new GC.Spread.Sheets.Style();
style.font = "bold 12px Arial";
style.foreColor = "white";
style.backColor = "#5B9BD5";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < 3; i++)
    activeSheet.setStyle(0, i, style, GC.Spread.Sheets.SheetArea.viewport);

음수 값 반전

막대형 차트에서 음수 값을 시각화할 때 invertIfNegative 속성을 true로 설정하면 해당 값을 반전 색상으로 표시할 수 있습니다. 이는 양수와 음수를 명확하게 구분하는 데 유용합니다. 기본 반전 색상은 rgb(255,255,255)이며, invertColor 속성을 사용하여 직접 지정할 수도 있습니다. 단, 채우기 색상이 패턴인 경우에는 invertColor가 무시되고, 패턴의 전경색과 배경색이 서로 바뀌어 음수 표시가 적용됩니다.

아래 이미지는 Series 1(October)의 음수 값이 반전 색상으로 표시된 예시입니다.

ColumnChart-InvertIfNegative


아래 코드는 음수 값의 색상을 반전시키는 예제입니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// 데이터 준비 
var dataArray = [
    [, 'North', 'East', 'West', 'South'],
    ['October', -18, 11, 76, 23],
    ['November', 25, 26, -12, -29],
    ['December', 44, 10, 72, -18],
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 350, 20, 600, 400, 'A1:E4');
var title = chart.title();
title.text = 'Profit Analysis by Region (Qtr 3, 2022-23)';
title.fontSize = 16;
title.fontFamily = 'Calibri';
chart.title(title);
//  시리즈1에서 음수 값의 색상을 반전하도록 설정하고, 반전 색상을 검정색으로 지정
var series1 = chart.series().get(0);
series1.backColor = "cyanblue";
series1.invertIfNegative = true;
series1.invertColor = "red";
chart.series().set(0, series1);
sheet.resumePaint();