条形图
条形图广泛用于说明各个项目或类别之间的比较。
可以在条形图中绘制表单的列或行中排列的数据。 在条形图中，类别沿垂直轴组织，数据值沿水平轴组织。
SpreadJS支持以下类型的条形图。 在下面显示的示例中，不同类型的小工具分别显示了第一季度，第二季度和第三季度的小工具类别的年销售记录：移动电话，笔记本电脑和平板电脑。
簇状条形图
簇状条形图显示了不同类别中值的比较。
簇状条形图的图像如下所示：
堆积条形图
堆积条形图以二维和三维矩形显示每个项目/类别与整体的关系。
堆积条形图的图像如下所示：
百分比堆积条形图
百分比堆积的条形图显示每个值在不同类别中占总计的百分比的比较。
百分比堆积的条形图的图像如下所示
示例代码
此代码显示如何在表单中添加不同类型的条形图。
var chart_barClustered, chart_barStacked, chart_barStacked100, 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_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4");
//添加堆积条形图
chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4");
//添加百分比堆积条形图
chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 250, 900, 600, 400, "A1:D4");
sheet.resumePaint();
};
设置间隙宽度和重叠
在条形图中，可以使用 gapWidth 属性设置系列之间的间隙宽度。 gapWidth 属性的值可以设置为0到5，默认值为1。
另外，您可以使用 overlap 属性设置系列重叠的值。 此属性的值必须在-1和1之间。如果将该值设置为-1，则条形图的放置位置应使它们之间有一个空格。 如果该值设置为1，则条形图位于彼此的顶部。
下图显示了图表中间隙宽度和系列重叠的示例。
为了与重叠一起设置条形图的间隙宽度，请参考以下示例代码。
// 初始化表单
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 获取表单
var activeSheet = spread.getSheet(0);
// 为图表准备数据
var dataArray =
[
['Year', 'Actual (00$)', 'Blank', 'Target (00$)'],
['2013', 20, 0, 50],
['2014', 24, 0, 50],
['2015', 34, 0, 50],
['2016', 32, 0, 50],
['2017', 51, 0, 100],
['2018', 62, 0, 100],
['2019', 95, 0, 100]
];
// 给图表设置数据
activeSheet.setArray(0, 0, dataArray);
// 设置列宽和可见性
activeSheet.setColumnWidth(1, 90);
activeSheet.setColumnWidth(3, 90);
activeSheet.setColumnVisible(2, false, GC.Spread.Sheets.SheetArea.viewport);
// 添加条形图
chart_bar = activeSheet.charts.add('chart_bar', GC.Spread.Sheets.Charts.ChartType.bar, 270, 20, 500, 400);
// 将系列添加到条形图
var series = chart_bar.series();
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.bar,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "Sheet1!$D$1",
xValues: "Sheet1!$A$2:$A$8",
yValues: "Sheet1!$D$2:$D$8",
});
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.bar,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "Sheet1!$B$1",
xValues: "Sheet1!$A$2:$A$8",
yValues: "Sheet1!$B$2:$B$8"
});
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.bar,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
name: "Sheet1!$C$1",
xValues: "Sheet1!$A$2:$A$8",
yValues: "Sheet1!$C$2:$C$8"
});
// 隐藏图表中的网格线
var gridLinesAxes = chart_bar.axes();
gridLinesAxes.primaryCategory.majorGridLine.visible = false;
gridLinesAxes.primaryValue.majorGridLine.visible = false;
chart_bar.axes(gridLinesAxes);
// 获取标题并将其设置为文本
var title = chart_bar.title();
title.fontSize = "24.00";
title.text = "Yearly Sales Analysis";
chart_bar.title(title);
// 设置 series(0) 背景色
var seriesItem = chart_bar.series().get(0);
seriesItem.backColor = "#A9CCE3";
chart_bar.series().set(0, seriesItem);
// 设置 series(1) 背景色
var seriesItem = chart_bar.series().get(1);
seriesItem.backColor = "#1F618D";
// 设置系列的GapWidth
seriesItem.gapWidth = 2;
// 设置系列的重叠
seriesItem.overlap = 0.6;
chart_bar.series().set(1, seriesItem);
// 设置图表的数据标签
chart_bar.dataLabels
({
showValue: true,
color: "black"
});