概述
本 Demo 展示了如何创建组合图表，包括常规组合图（柱状图+折线图）和仪表盘图表（圆环图+饼图）。第一个工作表演示了在柱状图基础上添加折线系列，形成组合图效果；第二个工作表演示了如何通过多个圆环图和饼图系列的组合，创建仪表盘图表，并添加旋转按钮控件动态调整指针位置。
实现思路
工作表 1：常规组合图
准备月度男女注册数据
使用 sheet.charts.add() 创建基础柱状图，显示男性和女性数据
使用 chart.series().add() 添加折线系列，显示总数趋势
设置数据标签显示在柱状图上方
工作表 2：仪表盘图表
准备绩效标签和数值数据
创建圆环图作为仪表盘背景，设置起始角度为 270 度
为每个数据点设置不同的背景颜色（差、一般、好、优秀）
添加第二个圆环图系列作为刻度背景
添加饼图系列作为指针，使用次坐标轴
添加旋转按钮控件，通过 cellLink 属性关联到指针数据单元格
代码解析
创建基础柱状图
这段代码使用 charts.add() 方法创建一个簇状柱形图。参数依次为图表名称、图表类型、位置（x, y）、尺寸（宽度、高度）、数据范围和数据方向。
添加折线系列创建组合图
通过 series().add() 方法向现有图表添加新的系列。关键是设置 chartType 属性为不同的图表类型（如 lineMarkers 表示带标记的折线图），从而形成组合图效果。
设置圆环图起始角度和颜色
使用 series().get() 获取系列对象，设置 startAngle 为 270 度使圆环图从底部开始绘制。通过 dataPoints 属性为每个数据点设置不同的背景颜色，形成仪表盘的不同绩效区域。修改后使用 series().set() 方法更新图表。
添加饼图系列作为指针
添加饼图系列作为仪表盘指针。axisGroup 设置为 secondary 表示使用次坐标轴，startAngle 设置为 270 度与圆环图保持一致。通过设置 dataPoints[1].backColor 为红色来显示指针颜色，其他数据点设置为透明。
添加旋转按钮控件
使用 shapes.addFormControl() 方法添加旋转按钮控件。cellLink 属性将控件值绑定到单元格 H2，当点击旋转按钮时，单元格的值会自动更新，从而改变仪表盘指针的位置。
运行效果
工作表 1：柱状图显示男性和女性的月度注册人数，折线图显示总数趋势，数据标签显示在柱状图上方
工作表 2：圆环图显示绩效区域（差、一般、好、优秀），饼图作为指针指向当前绩效值，点击旋转按钮可以调整指针位置（0-100），图表会实时更新
API 参考
charts.add() 方法
name：图表名称
chartType：图表类型（如 columnClustered、line、doughnut、pie 等）
x、y：图表位置
width、height：图表尺寸
dataRange：数据范围（可选）
dataOrientation：数据方向（可选）
series().add() 方法
series.chartType：系列类型
series.name：系列名称（单元格引用）
series.xValues：X 轴数据范围
series.yValues：Y 轴数据范围
series.axisGroup：坐标轴组（primary 或 secondary）
series.startAngle：起始角度（饼图、圆环图）
series.dataPoints：数据点样式
series.doughnutHoleSize：圆环孔大小（0-0.9）
shapes.addFormControl() 方法
formControlType：控件类型（如 spinButton）
left、top：控件位置
width、height：控件尺寸
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
var sheet1 = sheets[0];
var sheet2 = sheets[1];
initSheet1(sheet1);
initSheet2(sheet2);
addFormControl(sheet2);
var chart1 = initChart1(sheet1, GC.Spread.Sheets.Charts.ChartType.columnClustered); //add chart
chart1.title({
text: "Monthly Registration Number and Distribution of Men and Women"
});
addSeriesLine(chart1, GC.Spread.Sheets.Charts.ChartType.lineMarkers);
changColumnChartDataLabels(chart1);
var chart2 = initChart2(sheet2, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
chart2.title({
text: "Gauge Chart"
});
adjustDoughnutSeries(chart2);
addDoughnutSeries(chart2);
addPieSeries(chart2)
spread.resumePaint();
}
function initSheet1(sheet) {
//prepare data for chart
var dataArray = [
["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
["MAN", 327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
["WOMEN", 709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
["TOTAL", 1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
];
sheet.setArray(0, 0, dataArray);
sheet.name("Normal Combo Chart");
}
function initSheet2(sheet) {
var dataArray1 = [
['Performance Label', 'Value'],
["Poor", 20],
["Average", 50],
["Good", 20],
["Excellent", 10],
["Total", 100],
];
sheet.setArray(0, 0, dataArray1);
sheet.tables.add('table1', 0, 0, 6, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
var dataArray2 = [
["Labels", "Values"],
[10, 10],
[20, 10],
[30, 10],
[40, 10],
[50, 10],
[60, 10],
[70, 10],
[80, 10],
[90, 10],
[100, 10],
["Total", 100],
];
sheet.setArray(0, 3, dataArray2);
sheet.tables.add('table2', 0, 3, 11, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
var dataArray3 = [
["Labels", "Values"],
["Pointer", 45],
["Thickness", 2],
["Rest", 154],
];
sheet.setArray(0, 6, dataArray3);
sheet.tables.add('table3', 0, 6, 4, 2, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.setFormula(3, 7, "=200-H2-H3");
sheet.name("Gauge Chart");
}
function initChart1(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart2'), type, 30, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
}
function initChart2(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 800, 450, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
}
//add a line type to create combo chart
function addSeriesLine(chart, type) {
var seriesItem = {};
seriesItem.chartType = type;
seriesItem.border = {
width: 3
};
seriesItem.name = 'A4';
seriesItem.xValues = 'B1:M1';
seriesItem.yValues = 'B4:M4';
chart.series().add(seriesItem);
}
//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.above;
chart.dataLabels(dataLabels);
}
//add a form control
function addFormControl(sheet) {
var spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 650, 300, 100, 60);
var options = spinButton.options();
options.minValue = 0;
options.maxValue = 100;
options.step = 1;
options.cellLink = "H2";
spinButton.options(options);
spinButton.value(25);
}
//add a form control
function adjustDoughnutSeries(chart) {
let doughnutSeries1 = chart.series().get(0);
doughnutSeries1.startAngle = 270;
var dataLabels = doughnutSeries1.dataLabels || {};
dataLabels.showCategoryName = true
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
doughnutSeries1.dataPoints[0] = {
backColor: "rgb(192,0,0)"
}
doughnutSeries1.dataPoints[1] = {
backColor: "rgb(255,255,0)"
}
doughnutSeries1.dataPoints[2] = {
backColor: "rgb(68,144,96)"
}
doughnutSeries1.dataPoints[3] = {
backColor: "rgb(112,173,71)"
}
doughnutSeries1.dataPoints[4] = {
backColor: ""
}
chart.series().set(0, doughnutSeries1);
var legend = chart.legend();
legend.visible = false;
chart.legend(legend);
}
function addDoughnutSeries(chart) {
var doughnutSeries2 = {};
doughnutSeries2.chartType = GC.Spread.Sheets.Charts.ChartType.doughnut;
doughnutSeries2.name = 'D1';
doughnutSeries2.yValues = 'E2:E12';
doughnutSeries2.startAngle = 270;
doughnutSeries2.doughnutHoleSize = 0.5;
doughnutSeries2.dataPoints = {
0: {
backColor: "rgb(231,230,230)",
},
1: {
backColor: "rgb(231,230,230)",
},
2: {
backColor: "rgb(231,230,230)",
},
3: {
backColor: "rgb(231,230,230)",
},
4: {
backColor: "rgb(231,230,230)",
},
5: {
backColor: "rgb(231,230,230)",
},
6: {
backColor: "rgb(231,230,230)",
},
7: {
backColor: "rgb(231,230,230)",
},
8: {
backColor: "rgb(231,230,230)",
},
9: {
backColor: "rgb(231,230,230)",
},
10: {
backColor: "",
},
}
chart.series().add(doughnutSeries2);
}
function addPieSeries(chart) {
var pieSeries = {};
pieSeries.chartType = GC.Spread.Sheets.Charts.ChartType.pie;
pieSeries.name = 'G1';
pieSeries.xValues = 'G2:G4';
pieSeries.yValues = 'H2:H4';
pieSeries.axisGroup = GC.Spread.Sheets.Charts.AxisGroup.secondary;
pieSeries.startAngle = 270;
pieSeries.dataPoints = {
0: {
backColor: "",
},
1: {
backColor: "red",
},
2: {
backColor: "",
},
}
chart.series().add(pieSeries);
}
<!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$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}
