在图表中显示空单元格

在表单中可视化数据时，您可能希望在图表中绘制空白或空单元格以及其他数据。

SpreadJS提供了与Excel中一样在图表中显示空单元格和空值的支持。此功能有助于在图表中绘制丢失的数据，因此有助于用户快速识别和更正数据中的任何问题。

使用此功能，用户可以将空白单元格或空值显示为间隙，将空白单元格显示为零值，并根据其要求和特定的偏好将空白点与一条线连接起来。默认情况下，引用表单中空白单元格的图表通过将空白点连接为一条线来自动填充丢失的数据。

将空白单元格显示为空白

用户可以使用 displayBlanksAs() 方法的 Chart 类将空单元格显示为图表中的空白。

示例 - 下图描绘了比较两个不同公司的年销售收入的图表。您可能会注意到表单在单元格D2和D3中包含空白数据。现在，如果您要将这些空白单元格（D2和D3）显示为图表中的间隙，仅需使用 displayBlanksAs() 方法将值设为“blank”并且您的图表将如下图所示显示。

将空单元格显示为零值

用户可以使用 displayBlanksAs() 方法的 Chart 类在图表中将空单元格显示为零值。

示例 - 下图描绘了比较两个不同公司的年销售收入的图表。您可能会注意到表单在单元格D2和D3中包含空白数据。现在，如果您想在图表中将这些空单元格（D2和D3）显示为零值，仅需使用 displayBlanksAs() 方法将值设为“zero”并且您的图表将如下图所示显示。

用线连接空点

用户可以使用 displayBlanksAs() 方法的 Chart 类将空数据显示为图表中的连接线。

示例 - 下图描绘了比较两个不同公司的年销售收入的图表。您可能会注意到表单在单元格D2和D3中包含空白数据。现在，如果要在图表中将这些空单元格（D2和D3）显示为连接值，仅需使用 displayBlanksAs() 方法将值设为“connected ”并且您的图表将如下图所示显示。

支持的图表类型

所有图表类型均支持此功能。但是，如何在各种图表中显示空白单元格有一些差异，如下所述：

对于折线，带数据点折线图，xy散点图，xy不带数据点的散点图，xy带平滑线的散点图，xy带平滑线不带数据点散点图和雷达图类型；支持所有三个选项 (gaps, zero 和 connected)。
对于组合图，如果它包含任何系列类型：折线图，带数据点折线图，xy散点带折线图，xy三点折线不带数据点图，xy带平滑线散点图，xy带平滑线和数据点散点图和雷达图；然后它将支持所有三个选项(gaps, zero 和 connected)；否则，仅支持两个选项：gaps和zero。
对于旭日图，树形图，带数据点堆积折线图，百分比带数据点堆积折线图，堆积折线图，百分比堆积折线图图表类型，仅支持zero选项（即用户只能将空单元格显示为零值）。
对于其他非组合图表类型，仅支持gaps和zero

代码

请参考以下示例代码，以将空白单元格显示为图表中的间隙。

// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 获取表单
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 准备数据
activeSheet.setValue(0, 1, "Y-2013");
activeSheet.setValue(0, 2, "Y-2014");
activeSheet.setValue(0, 3, "Y-2015");
activeSheet.setValue(0, 4, "Y-2016");
activeSheet.setValue(0, 5, "Y-2017");
activeSheet.setValue(0, 6, "Y-2018");
activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
activeSheet.setColumnWidth(0, 120);
var dataArray =
[
[2331, 4663, , 5689, 6230, 6360],
[2284, 2030, , 1560, 2324, 1304]

];
activeSheet.setArray(1, 1, dataArray);
// 添加数据点折线图
var chart = activeSheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G3');
// 配置-将空白值显示为间隙
chart.displayBlanksAs(GC.Spread.Sheets.Charts.DisplayBlanksAs.gaps);
// 配置图表标题
var title = chart.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 16;
title.color = "Red";
chart.title(title);
activeSheet.resumePaint();