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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
<gc-worksheet />
<gc-worksheet />
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import {
ref
} from "vue";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-charts";
const spreadRef = ref(null);
function initSpread(spread) {
spreadRef.value = spread;
let sheet = spread.getSheet(0);
let 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();
let sheets = spread.sheets;
for (let i = 0; i < chartType.length; i++) {
let 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
let dataArray = [
['', 'Bob', 'David'],
['Math', 87, 64],
['Physics', 79, 59],
['History ', 58, 75],
['Biology', 64, 96],
['Geography', 49, 85],
['History', 64, 83]
];
sheet.setArray(1, 1, dataArray);
}
function customDataAreaStyle(sheet) {
sheet.setColumnWidth(0, 20);
for (let 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
let chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$7');
// 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) {
let legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
}
function changeChartArea(chart) {
let chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
}
function changeChartDataLabels(chart) {
let 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) {
let title = chart.title();
title.text = 'Reports';
title.fontSize = 22;
title.fontFamily = 'Calibri normal';
chart.title(title);
}
function changeChartAxes(chart) {
let axes = chart.axes();
axes.primaryCategory.style.color = '#666';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);
}
function changeChartSeries(chart) {
let series = chart.series();
let bobSeries = series.get(0);
bobSeries.border.color = 'skyblue';
bobSeries.backColor = 'skyblue';
bobSeries.backColorTransparency = '0.5';
series.set(0, bobSeries);
let davidSeries = series.get(1);
davidSeries.border.color = 'orange';
davidSeries.backColor = 'orange';
davidSeries.backColorTransparency = '0.5';
series.set(1, davidSeries);
}
function changeMarker(chart) {
let series = chart.series();
let bobSeries = series.get(0);
bobSeries.symbol.shape = 1;
bobSeries.symbol.size = 20;
series.set(0, bobSeries);
let davidSeries = series.get(1);
davidSeries.symbol.shape = 9;
davidSeries.symbol.size = 11;
series.set(1, davidSeries);
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
