组合图

组合图表将两种或多种图表类型组合在一个图表中，使用户更容易解释和理解数据。

当您想要可视化完全不相关的不同类型数据（例如：价格和数量）或需要在次轴上绘制一个或多个数据系列时，此图表是理想的选择。

排列在工作表的列或行中的数据可以绘制在组合图中。您可以通过两种方式创建组合图表：1) 通过创建柱形图和 2) 通过添加系列并设置其图表类型。例如，通过添加折线图。

在下面的示例中，借助组合图描绘了男性和女性的每月注册数量和分布（这是两种不同类型的数据）。

以下代码示例显示了如何将组合图表添加到电子表格。

// initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// get the activesheet
var activeSheet = spread.getSheet(0);

//prepare data for chart
var dataArray = [
    ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    ["MEN", 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]
];
activeSheet.setArray(0, 0, dataArray);
var chartType = [{
    type: GC.Spread.Sheets.Charts.ChartType.columnClusterd,
    comboType: GC.Spread.Sheets.Charts.ChartType.lineMarkers
}];

// Add Combo Chart
var chart = activeSheet.charts.add('ComboChart', chartType[0].type, 10, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
chart.title({ text: "Monthly Registration Number and Distribution of Men and Women" });
var seriesItem = {};
seriesItem.chartType = chartType[0].comboType;
seriesItem.border = { width: 3 };
seriesItem.name = 'A4';
seriesItem.xValues = 'B1:M1';
seriesItem.yValues = 'B4:M4';
chart.series().add(seriesItem);

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);

将仪表图创建为组合图

仪表图是一种数据可视化工具，表示针对分为多个部分的刻度的单个值。该图表使用针来指示值，并有助于根据定义的标准快速可视化 KPI 的性能。仪表图在显示进度信息、目标指标、项目截止日期等方面证明非常有效。

在 SpreadJS 中，就像 Excel 一样，您可以使用组合图表通过组合圆环图和饼图来创建仪表图。

仪表图

下面的示例代码展示了如何在 SpreadJS 中创建仪表图。

var spread;
window.onload = function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
        sheetCount: 1
    });
    initSpread(spread);
};
function initSpread(spread) {
    var sheets = spread.sheets;
    spread.suspendPaint();
    var sheet1 = sheets[0];

    initsheet1(sheet1);
    var chart2 = initChart(sheet1, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
    chart2.title({
        text: "Annual Performance"
    });
    adjustDoughnutSeries(chart2);
    addPieSeries(chart2)
    spread.resumePaint();
}
function initsheet1(sheet) {
    var dataArray1 = [
        ['Performance Label', 'Value'],
        ["Poor", 20],
        ["Average", 50],
        ["Good", 20],
        ["Excellent", 10],
        ["Total", 100],
    ];
    sheet.setArray(0, 0, dataArray1);

    var dataArray2 = [
        ["Labels", "Values"],
        ["Pointer", 65],
        ["Thickness", 2],
        ["Rest", 154],
    ];
    sheet.setArray(0, 6, dataArray2);
    sheet.setFormula(3, 7, "=200-H2-H3");
    sheet.name("Annual Performance");
}
function initChart(sheet, type) {
    //add chart
    let chart = sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 600, 340, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
    return chart

}
function adjustDoughnutSeries(chart) {
    let doughnutSeries1 = chart.series().get(0);
    doughnutSeries1.startAngle = 270;
	doughnutSeries1.doughnutHoleSize = 0.5;
    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 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);
}