雷达图

雷达图（也称为蜘蛛图）是二维图表，可用于表示以图形格式在行和列中绘制的多元数据。

SpreadJS支持表单中的雷达图，以便允许用户执行动态数据比较并进行全面的信息分析。 此外，通过对两个或多个数据系列的合计值进行深入评估，雷达图使可视化和操纵信息变得更加轻松快捷。

使用雷达图

雷达图通常用于比较一系列特征范围内的两个或多个实体。 在雷达图中，三个或更多定量变量表示在轴上，每个类别都有从中心点放射的自己的值轴。 使用直线来连接系列值，并且轴的相对位置或角度通常是不可预测的。

Spread JS支持三种类型的雷达图-1）基本雷达图2）雷达填充图和3）带有标记的雷达图。

示例

在下面显示的示例中，借助不同类型的雷达图的帮助下绘制在六个不同的科目（数学，英语，历史，生物学，地理和动物学）考试成绩分析，并给出了以下数据：

• 雷达图 下面的基本雷达图显示了描绘两个学生的考试成绩分析的图像，每个学生用不同的线条颜色突出显示了区域：
• 雷达填充图 下方是雷达图填充图，显示了两个学生的考试成绩分析图像，每个学生的不同颜色区域突出显示了区域：
• 带标记的雷达图 雷达图中显示了描绘两个学生的考试成绩分析的图像，其中的标记代表每个学科的成绩以及每个学生用不同的线条颜色突出显示的区域：

示例代码

此示例代码显示了如何在表单中创建基本雷达图，填充雷达图和带标记的雷达图以分析两个学生的分数。

// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// 获取表单
var activeSheet = spread.getSheet(0);
// 添加数据
var dataArray =
[
    ['', 'Lisa', 'Tim'],
    ['Mathematics', 87, 64],
    ['English', 79, 59],
    ['History ', 58, 75],
    ['Biology', 64, 96],
    ['Geography', 49, 85],
    ['Zoology', 64, 83]
];
activeSheet.setArray(1, 1, dataArray);
activeSheet.setColumnWidth(0, 20);
for (var i = 1; i < 4; i++) {
activeSheet.setColumnWidth(i, 100);
}
activeSheet.options.gridline.showHorizontalGridline = false;
activeSheet.options.gridline.showVerticalGridline = false;
activeSheet.getRange(1, 1, 7, 3)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin),
    { all: true });
activeSheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');
activeSheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');

// 添加雷达图
// 1 - 雷达图
// 2 - 雷达填充图
// 3 - 带标记的雷达图
var chart = activeSheet.charts.add('RadarChart', GC.Spread.Sheets.Charts.ChartType.radar, 250, 0, 500, 410, '$B$2:$D$7');
var legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);

var chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);

var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;
chart.dataLabels(dataLabels);

var title = chart.title();
title.text = 'Test Score Analysis';
title.fontSize = 22;
title.color = "#b20000";
title.fontFamily = 'Cambria';
chart.title(title);

var axes = chart.axes();
axes.primaryCategory.style.color = '#000000';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);

var series = chart.series();
var lisaSeries = series.get(0);
lisaSeries.border.color = 'skyblue';
lisaSeries.backColor = 'skyblue';
lisaSeries.backColorTransparency = '0.5';
series.set(0, lisaSeries);
var timSeries = series.get(1);
timSeries.border.color = 'orange';
timSeries.backColor = 'orange';
timSeries.backColorTransparency = '0.5';
series.set(1, timSeries);