# 세로 막대형 차트

## Content

세로 막대형 차트는 데이터를 가로 축 위의 세로 막대를 통해 나타내며, 두 개 이상의 데이터 범주 간의 비교 및 분석에 적합합니다.
워크시트의 열이나 행에 정렬된 데이터를 세로 막대형 차트로 시각화할 수 있습니다.
SpreadJS는 다음 세 가지 유형의 세로 막대형 차트를 지원합니다. 아래 예시에서는 모바일폰, 노트북, 태블릿과 같은 다양한 기기 범주에 대해 1분기(Q1), 2분기(Q2), 3분기(Q3)의 연간 판매 실적을 세 가지 유형의 차트로 나타냅니다.

## 묶은 세로 막대형 차트

묶은 세로 막대형 차트는 다양한 범주에 걸친 여러 값을 비교하고, 이들을 2D 또는 3D 세로 직사각형으로 표시할 때 사용할 수 있습니다. 일반 차트처럼 수직 방향으로 누적도 가능합니다.
아래 이미지는 묶은 세로 막대형 차트를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/Clustered_Column.png)

## 누적 세로 막대형 차트

누적 세로 막대형 차트는 특정 항목이 전체에 기여하는 관계를 범주별로 보여주며, 값을 2D 또는 3D 세로 직사각형으로 누적하여 표시합니다.
아래 이미지는 누적 세로 막대형 차트를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/Stacked_Column.png)

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

100% 기준 누적 세로 막대형 차트는 각 값이 전체에서 차지하는 백분율을 비교할 때 사용되며, 모든 값이 100%가 되도록 세로로 누적하여 표시합니다. 이 값들은 2D 또는 3D 직사각형으로 시각화됩니다.
아래 이미지는 100% 기준 누적 세로 막대형 차트를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/100_Stacked_Column.png)

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

```javascript
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`은 막대가 완전히 겹치게 됩니다.
아래 이미지는 차트에서 간격 너비와 시리즈 겹침을 적용한 예시입니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/gapwidthandoverlap.png)

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

```javascript
// 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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ColumnChart-InvertIfNegative.8f9b2e.png)

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

```javascript
// 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();
```