组合图

在列和行中排列的数据可以在组合图中进行绘制。组合图表组合了两个或更多的图表类型,使数据易于阅读和理解。

有两个步骤去通过增加系列来创建组合图表,例如: 通过柱状图来创建一个图表: 增加一个系列并将这个系列的图表类型设置成折线类型: 目前,支持以下图表类型的组合: Clustered column chart Stacked column chart 100% Stacked column chart Clustered bar chart Stacked bar chart 100% Stacked bar chart Line chart Stacked line chart 100% Stacked line chart Line with makers chart Stacked line with makers chart 100% Stacked line with makers chart Area chart Stacked area chart 100% Stacked area chart Pie chart Doughnut chart Scatter chart Scatter with smooth lines chart Scatter with smooth lines with makers chart Scatter with straight lines chart Scatter with straight lines with makers chart
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.columnClusterd); //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; }