SpreadJS supports radar, radarFilled , and radarMarkers radar charts. You can use the GC.Spread.Sheets.Charts.ChartType.radar property to get the chart type.
For example, you can insert a radar chart type and change the chart style using the chart API.
You can customize the color, shape, border of marker at the radarMarkers like below example.
Radar and RadarMarkers charts can be shown with or without markers to indicate individual data values.
RadarFilled charts can be shown with filled.
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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;
}
