概述
本 Demo 展示了如何创建和自定义三种不同类型的雷达图：普通雷达图、填充雷达图和带标记的雷达图。通过三个工作表分别演示了雷达图的基本创建、样式自定义以及数据标记设置，使用员工能力评估数据作为示例。
实现思路
创建三个工作表，分别用于展示 radar、radarFilled、radarMarkers 三种图表类型
为每个工作表准备相同的员工能力评估数据（主动性、创新能力、诚信、学习能力、守时性、团队协作）
为每个工作表创建对应类型的雷达图，设置数据范围为 $B$2:$D$8
自定义图表样式：设置图例位置、图表区域字体、图表标题、坐标轴样式和数据系列颜色
对于 radarMarkers 类型，额外设置数据标记的形状和大小；对于其他类型，显示数据标签
代码解析
创建三种类型的雷达图
代码定义了三种雷达图类型。radar 为普通雷达图，radarFilled 为填充雷达图（数据区域被颜色填充），radarMarkers 为带标记的雷达图（每个数据点显示标记符号）。
创建图表并设置基本样式
使用 charts.add() 方法创建雷达图，参数依次为图表名称、图表类型、位置、尺寸和数据范围。然后通过一系列自定义函数设置图表样式。
自定义数据系列样式
通过 series.get() 获取数据系列对象，设置边框颜色、背景色和透明度，然后使用 series.set() 应用更改。透明度设置为 0.5 使填充区域呈现半透明效果，便于观察重叠区域。
为 radarMarkers 类型设置数据标记
对于带标记的雷达图，通过 symbol 属性设置数据标记的形状和大小。shape 值为 1 表示特定的标记形状，size 设置标记的大小为 20 像素。
运行效果
第一个工作表展示普通雷达图，显示两名员工的能力评估数据，不同颜色区分不同员工，并显示数据标签
第二个工作表展示填充雷达图，数据区域被半透明颜色填充，更清晰地展示数据覆盖范围
第三个工作表展示带标记的雷达图，每个数据点显示特定形状和大小的标记符号
所有图表都设置了统一的标题、图例和坐标轴样式，便于数据对比分析
API 参考
ChartType 枚举
charts.add() 方法
name：图表名称
chartType：图表类型，使用 ChartType 枚举值
x、y：图表位置
width、height：图表尺寸
dataRange：数据范围
series.get() 和 series.set() 方法
symbol 属性
用于设置雷达图数据标记的形状和尺寸。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {sheetCount: 3});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
var chartType = [
{
type: GC.Spread.Sheets.Charts.ChartType.radar,
desc: 'radar'
},
{
type: GC.Spread.Sheets.Charts.ChartType.radarFilled,
desc: 'radarFilled'
},
{
type: GC.Spread.Sheets.Charts.ChartType.radarMarkers,
desc: 'radarMarkers'
}
];
spread.suspendPaint();
var sheets = spread.sheets;
for (var i = 0; i < chartType.length; i++) {
var sheet = sheets[i];
initSheet(sheet, chartType[i].desc);
initChart(sheet, chartType[i].type);
customDataAreaStyle(sheet);
}
spread.options.tabStripRatio = 0.8;
spread.resumePaint();
}
function initSheet(sheet, sheetName) {
sheet.name(sheetName);
// prepare data for chart
var dataArray = [
['', 'Bob', 'David'],
['Initiative', 4, 3],
['Innovation', 4, 3],
['Integrity', 3, 4],
['Learning Capability', 3, 5],
['Punctuality', 2, 5],
['Team Player', 3, 4]
];
sheet.setArray(1, 1, dataArray);
}
function customDataAreaStyle(sheet) {
sheet.setColumnWidth(0, 20);
for (var i = 1; i < 4; i++) {
sheet.setColumnWidth(i, 100);
}
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.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});
sheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');
sheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');
}
function initChart(sheet, chartType) {
//add chart
var chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$8');
// custom chart style
changeChartLegend(chart);
changeChartArea(chart);
changeChartTitle(chart);
changeChartAxes(chart);
changeChartSeries(chart);
if (chartType === GC.Spread.Sheets.Charts.ChartType.radarMarkers) {
changeMarker(chart);
} else {
changeChartDataLabels(chart);
}
}
function changeChartLegend(chart) {
var legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
}
function changeChartArea(chart) {
var chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
}
function changeChartDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;
chart.dataLabels(dataLabels);
}
function changeChartTitle(chart) {
var title = chart.title();
title.text = 'Reports';
title.fontSize = 22;
title.fontFamily = 'Calibri normal';
chart.title(title);
}
function changeChartAxes(chart) {
var axes = chart.axes();
axes.primaryCategory.style.color = '#666';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);
}
function changeChartSeries(chart) {
var series = chart.series();
var bobSeries = series.get(0);
bobSeries.border.color = 'skyblue';
bobSeries.backColor = 'skyblue';
bobSeries.backColorTransparency = '0.5';
series.set(0, bobSeries);
var davidSeries = series.get(1);
davidSeries.border.color = 'orange';
davidSeries.backColor = 'orange';
davidSeries.backColorTransparency = '0.5';
series.set(1, davidSeries);
}
function changeMarker(chart) {
var series = chart.series();
var bobSeries = series.get(0);
bobSeries.symbol.shape = 1;
bobSeries.symbol.size = 20;
series.set(0, bobSeries);
var davidSeries = series.get(1);
davidSeries.symbol.shape = 9;
davidSeries.symbol.size = 11;
series.set(1, davidSeries);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="ss" class="sample-tutorial"></div>
</body>
</html>
.sample-tutorial {
height: 100%;
width: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
