面积图

面积图广泛用于显示每个数据值对总时间的贡献。 通常，当您需要显示曲线随时间变化并通过显示曲线值的总和来描绘整个趋势的总值时，此图表非常理想。

可以将表单的列或行中排列的数据绘制在面积图中。

SpreadJS支持以下类型的面积图。 在下面显示的示例中，不同类型的区域图描绘了不同类别的小工具（手机，笔记本电脑和平板电脑）的第1季度，第2季度和第3季度的年度销售记录。

• 面积图 簇状面积图将数据系列描绘为有色区域，有助于比较同一数据点的多个系列的值。 该图表显示了一段时间内的趋势。 簇状面积图的图像如下所示：
• 堆积面积图 堆叠面积图将数据序列描绘为具有不同颜色的堆叠区域，这有助于在同一数据点的多个序列之间进行比较。 此图表显示了每个值对时间的贡献趋势或其他分类数据。 An image of a stacked area chart is shown below:
• 百分比堆积面积图 百分比堆叠面积图描绘了一系列数据点，并随时间显示了正值和负值，以揭示同一数据点的多个系列的值。 此图表显示了每个值随时间或其他分类数据所占的百分比。 下图显示了百分比堆积面积图的图像：

示例代码

此代码显示了如何在表单中添加不同类型的面积图。

var chart_area, chart_areaStacked, chart_areaStacked100, sheet;
    window.onload = function () {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        sheet = spread.getActiveSheet();
        sheet.suspendPaint();
        //准备数据
            sheet.setValue(0, 1, "Q1");
        sheet.setValue(0, 2, "Q2");
        sheet.setValue(0, 3, "Q3");
        sheet.setValue(1, 0, "Mobile Phones");
        sheet.setValue(2, 0, "Laptops");
        sheet.setValue(3, 0, "Tablets");
        for (var r = 1; r <= 3; r++) {
            for (var c = 1; c <= 3; c++) {
                sheet.setValue(r, c, parseInt(Math.random() * 100));
            }
        }
//添加面积图
            chart_area = sheet.charts.add('chart_areaClustered', GC.Spread.Sheets.Charts.ChartType.area, 250, 20, 600, 400, "A1:D4");
//添加堆积面积图
            chart_areaStacked = sheet.charts.add('chart_areaStacked', GC.Spread.Sheets.Charts.ChartType.areaStacked, 250, 480, 600, 400, "A1:D4");
//添加百分比堆积面积图
            chart_areaStacked100 = sheet.charts.add('chart_areaStacked100', GC.Spread.Sheets.Charts.ChartType.areaStacked100, 250, 900, 600, 400, "A1:D4");
        sheet.resumePaint();
    };