가로 막대형 차트

가로 막대형 차트는 개별 항목 또는 범주 간의 비교를 시각적으로 나타내는 데 널리 사용됩니다. 워크시트의 열 또는 행에 배열된 데이터를 가로 막대형 차트로 나타낼 수 있습니다. 가로 막대형 차트에서는 범주가 수직 축을 따라 정렬되고, 데이터 값은 수평 축을 따라 표시됩니다.

SpreadJS는 다음과 같은 유형의 가로 막대형 차트를 지원합니다. 아래 예시에서는 다양한 전자기기 범주(Mobile Phones, Laptops, Tablets)에 대한 1분기, 2분기, 3분기 연간 판매 기록을 다양한 유형의 가로 막대형 차트로 나타냅니다.

묶은 가로 막대형 차트

묶은 가로 막대형 차트는 다양한 범주 간의 값을 비교해서 보여줍니다.

아래 이미지는 묶은 가로 막대형 차트 예시입니다:

누적 가로 막대형 차트

누적 가로 막대형 차트는 각 항목 또는 범주가 전체에 대해 차지하는 관계를 2D 또는 3D 직사각형으로 표시합니다.

아래 이미지는 누적 가로 막대형 차트 예시입니다:

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

100% 기준 누적 가로 막대형 차트는 각 값이 전체에서 차지하는 비율을 다양한 범주에 걸쳐 비교해서 보여줍니다.

아래 이미지는 100% 기준 누적 가로 막대형 차트 예시입니다:

다음 코드 샘플은 다양한 유형의 가로 막대형 차트를 스프레드시트에 추가하는 방법을 보여줍니다.

var chart_barClustered, chart_barStacked, chart_barStacked100, 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_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4");
    // 누적 가로 막대형 차트 추가
    chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4");
    // 100 기준 누적 가로 막대형 차트 추가
    chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 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$)', 'Blank', 'Target (00$)'],
    ['2013', 20, 0, 50],
    ['2014', 24, 0, 50],
    ['2015', 34, 0, 50],
    ['2016', 32, 0, 50],
    ['2017', 51, 0, 100],
    ['2018', 62, 0, 100],
    ['2019', 95, 0, 100]

];
// 차트 데이터 설정
activeSheet.setArray(0, 0, dataArray);
// 열 너비와 가시성 설정
activeSheet.setColumnWidth(1, 90);
activeSheet.setColumnWidth(3, 90);
activeSheet.setColumnVisible(2, false, GC.Spread.Sheets.SheetArea.viewport);

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

});

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

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

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

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

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

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

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

음수 값 반전

가로 막대형 차트에 음수 값을 표시할 때, SpreadJS는 invertIfNegative 옵션을 true로 설정하여 음수 값의 색상을 반전시킬 수 있도록 지원합니다. 이 기능은 음수 값을 강조하고 양수 값과 구분하는 데 도움이 됩니다. 기본 반전 색상은 rgb(255,255,255)입니다. invertColor 옵션을 사용하여 반전 색상을 직접 지정할 수도 있습니다.

시리즈 차트의 채우기 색상이 패턴으로 설정되어 있는 경우, SpreadJS는 invertColor 값을 무시하고 패턴의 전경색과 배경색을 서로 바꾸어 음수 값에 반전 형식을 적용합니다.

아래 이미지는 가로 막대형 차트에서 Series 1(October)의 음수 값이 반전 색상으로 표시되는 예시입니다.

BarChart-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.barClustered, 350, 20, 550, 450, '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의 invertIfNegative를 true로, invertColor를 검정색으로 설정
var series1 = chart.series().get(0);
series1.backColor = "#80bfff";
series1.invertIfNegative = true;
series1.invertColor = "red";
chart.series().set(0, series1);
sheet.resumePaint();

가로 막대형 차트

묶은 가로 막대형 차트

누적 가로 막대형 차트

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

간격 너비 및 겹침 설정

음수 값 반전

제품

고객 서비스

메시어스 정보

정책(Policy)