複合チャート

複合チャートは、データをより解釈しやすく、分かりやすく見せる目的で、複数の種類のチャートを1つに統合したチャートです。複合チャートは、互いにまったく関連性がない数種のデータ（価格と量など）を視覚化する場合や、1つまたは複数のデータ系列を第2軸にプロットする必要がある場合に便利です。

複合チャートには、ワークシートの列または行ごとにまとめたデータをプロットできます。複合チャートは、2段階で作成します。まず、縦棒チャートを作成します。次に、系列を追加し、チャートの種類を設定します。たとえば、折れ線チャートを追加します。

次の例では、複合チャートを使用して、月間登録件数、および男女別の分布（2種類のデータ）状況を表します。

コードの使用

次のコードは、スプレッドシートに複合チャートを追加する方法を示します。

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// アクティブシートを取得します。
var activeSheet = spread.getSheet(0);

// チャートのデータを準備します。
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
}];

// 複合チャートを追加します。
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の同様に、複合チャートを使用してドーナツチャートと円チャートを組み合わせてゲージチャートを作成することができます。

gauge-chart

次のサンプルコードは、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); // チャートを追加します。
    chart2.title({
        text: "年間パフォーマンス"
    });
    adjustDoughnutSeries(chart2);
    addPieSeries(chart2)
    spread.resumePaint();
}
function initsheet1(sheet) {
    var dataArray1 = [
        ['パフォーマンスラベル', '値'],
        ["悪い", 20],
        ["平均", 50],
        ["良い", 20],
        ["優秀", 10],
        ["合計", 100],
    ];
    sheet.setArray(0, 0, dataArray1);

    var dataArray2 = [
        ["ラベル", "値"],
        ["ポインター", 65],
        ["厚さ", 2],
        ["REST", 154],
    ];
    sheet.setArray(0, 6, dataArray2);
    sheet.setFormula(3, 7, "=200-H2-H3");
    sheet.name("パフォーマンスラベル");
}
function initChart(sheet, type) {
    // チャートを追加します。
    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);
}