SpreadJS 支持簇状柱形图，堆积柱形图和百分比堆积柱形图。通过 GC.Spread.Sheets.Charts.ChartType.columnClustered 来指定chartType为簇状柱形图。
下方代码展示了如何插入一个 ColumnClustered （簇状柱形图）类型的chart， 你可以通过chart的api来更改chart的样式。
柱形图也可以是堆积柱形图或者百分比堆积柱形图。使用 GC.Spread.Sheets.Charts.ChartType.columnStacked , GC.Spread.Sheets.Charts.ChartType.columnStacked100 来指定这两种柱形图
ColumnStacked 图表类型会将系列以任意方式堆积在一起。
ColumnStacked100% 图表类型会将系列以百分比的方式堆积在一起。
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="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.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;
}
