세로 막대형 차트

세로 막대형 차트는 데이터 분석을 위해 가장 자주 널리 사용되는 방법입니다. 워크시트의 열 또는 행에 정렬된 데이터는 세로 막대형 차트에 그려질 수 있습니다.

는 columnClustered, columnStacked 및 columnStacked100 세로 막대형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.columnClustered 속성을 사용하여 차트 유형을 가져옵니다. 예를 들어, columnClustered 차트 유형을 삽입하고 차트 API를 사용하여 차트 스타일을 변경할 수 있습니다. 세로 막대형 차트는 columnStacked 및 columnStacked100 차트 유형을 사용하여 일반 누적 또는 100% 기준 누적이 될 수 있습니다. columnStacked 차트 유형은 계열을 세로로 누적합니다. ColumnStacked100 차트 유형은 계열을 세로로 누적하고 값을 100%에 맞도록 이퀄라이징합니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)']; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.columnClustered, desc: "columnClustered", dataArray: [ ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] ], dataFormula: "A1:M5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Monthly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked, desc: "columnStacked", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.columnStacked100, desc: "columnStacked100", dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", changeStyle: function (chart) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changColumnChartDataLabels(chart); chart.axes({primaryValue: {title: {text: "Rainfall(%)"}}}); changeChartSeriesColor(chart); changeChartSeriesGapWidthAndOverLap(chart); } }]; var sheets = spread.sheets; spread.suspendPaint(); for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc, chartType[i].dataArray); var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula);//add chart chartType[i].changeStyle(chart); } spread.resumePaint(); } function initSheet(sheet, sheetName, dataArray) { sheet.name(sheetName); //prepare data for chart sheet.setArray(0, 0, dataArray); sheet.setColumnWidth(0, 120); } function addChart(sheet, chartType, dataFormula) { //add chart return sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 100, 900, 400, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows); } function changeChartTitle(chart, title) { chart.title({text: title}); } // show dataLabels function changColumnChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.dataLabels(dataLabels); } //change color function changeChartSeriesColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { chart.series().set(i, {backColor: colorArray[i]}); } } function changeChartSeriesGapWidthAndOverLap(chart) { var seriesItem = chart.series().get(0); seriesItem.gapWidth = 2; seriesItem.overlap = 0.1; chart.series().set(0, seriesItem); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }