SpreadJS 支持雷达图，雷达填充图，以及带标记的雷达图。通过GC.Spread.Sheets.Charts.ChartType.radar类型等来获取图表类型。
例如，你可以通过图表的API插入一个 radar 图表并改变图表的样式。
您可以在radarmarker中自定义标记的颜色、形状和边框，如下面的示例所示:
radar 和 radarMarkers 类型可以展示带有数据标记或不带数据标记的各个数值。
radarFilled 类型可以通过颜色填充来展示数据意义。
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;
}
