SpreadJS는 barClustered, barStacked 및 barStacked100 차트를 지원합니다.
Spread에 가로 막대형 차트를 추가하고 차트 API를 사용하여 스타일을 변경할 수 있습니다.
가로 막대형: 가로 막대형 차트는 개별 항목을 비교합니다.
누적 가로 막대형: 누적 가로 막대형 차트는 전체에 대한 개별 항목의 관계를 가로 막대형으로 보여줍니다.
100% 기준 누적 가로 막대형: 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.barClustered,
desc: "barClustered",
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.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right});
chart.axes({primaryValue: {title: {text: "Rainfall(mm)"}, majorUnit:50}});
changeChartSeriesColor(chart);
changeChartSeriesGapWidthAndOverLap(chart);
}
}, {
type: GC.Spread.Sheets.Charts.ChartType.barStacked,
desc: "barStacked",
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.barStacked100,
desc: "barStacked100",
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, 0, 100, 900, 330, 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;
}
