概述
本 Demo 展示了如何在工作表中创建和自定义三种条形图：簇状条形图、堆积条形图和百分比堆积条形图。Demo 使用四个城市的季度降雨量数据，演示了不同条形图类型的特点和样式设置方法。
实现思路
初始化工作簿，创建三个工作表分别展示不同的条形图类型
为每个工作表准备图表数据（四个城市的季度平均降雨量）
使用 charts.add() 方法创建不同类型的条形图
设置图表标题、数据标签、坐标轴标题和单位
自定义图表系列的填充颜色
调整系列之间的间隔宽度和重叠比例
代码解析
添加条形图
charts.add() 方法用于向工作表添加图表。参数依次为：图表名称、图表类型、x 坐标、y 坐标、宽度、高度、数据范围、数据方向。dataOrientation 参数设置为 GC.Spread.Sheets.Charts.RowCol.rows，表示数据按行组织。
设置数据标签
通过 chart.dataLabels() 获取数据标签对象，设置 showValue 为 true 显示数值，使用 DataLabelPosition.outsideEnd 将标签显示在条形外侧。
自定义系列颜色和间距
series().get() 获取所有系列，series().set() 用于更新系列属性。backColor 设置系列的填充颜色，gapWidth 控制条形之间的间隔宽度，overlap 控制条形之间的重叠比例。
设置坐标轴
通过 chart.axes() 方法设置坐标轴属性，primaryValue 表示主数值轴。title.text 设置轴标题，majorUnit 设置主要刻度单位。
运行效果
工作簿包含三个工作表：barClustered（簇状条形图）、barStacked（堆积条形图）、barStacked100（百分比堆积条形图）
每个图表展示四个城市（东京、纽约、伦敦、柏林）的季度降雨量数据
条形使用不同的颜色区分城市
数据标签显示在条形外侧
图例位于图表右侧
Y 轴显示降雨量单位（mm 或 %）
API 参考
charts.add() 方法
name：图表名称
chartType：图表类型，使用 GC.Spread.Sheets.Charts.ChartType 枚举
x、y：图表在工作表中的位置
width、height：图表的宽度和高度
dataRange：可选，数据范围字符串
dataOrientation：可选，数据方向（按行或按列）
ChartType 枚举
GC.Spread.Sheets.Charts.ChartType.barClustered：簇状条形图
GC.Spread.Sheets.Charts.ChartType.barStacked：堆积条形图
GC.Spread.Sheets.Charts.ChartType.barStacked100：百分比堆积条形图
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="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;
}
