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.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import '@mescius/spread-sheets-charts';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: '100%',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
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];
this.initSheet(sheet, chartType[i].desc);
this.initChart(sheet, chartType[i].type);
this.customDataAreaStyle(sheet);
}
spread.options.tabStripRatio = 0.8;
spread.resumePaint();
}
initSheet(sheet: GC.Spread.Sheets.Worksheet, sheetName: string) {
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);
}
customDataAreaStyle(sheet: GC.Spread.Sheets.Worksheet) {
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');
}
initChart(sheet: GC.Spread.Sheets.Worksheet, chartType: GC.Spread.Sheets.ChartType) {
//add chart
let chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$7');
// custom chart style
this.changeChartLegend(chart);
this.changeChartArea(chart);
this.changeChartTitle(chart);
this.changeChartAxes(chart);
this.changeChartSeries(chart);
if (chartType === GC.Spread.Sheets.Charts.ChartType.radarMarkers) {
this.changeMarker(chart);
} else {
this.changeChartDataLabels(chart);
}
}
changeChartLegend(chart: GC.Spread.Sheets.Charts.Chart) {
let legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
}
changeChartArea(chart: GC.Spread.Sheets.Charts.Chart) {
let chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
}
changeChartDataLabels(chart: GC.Spread.Sheets.Charts.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);
}
changeChartTitle(chart: GC.Spread.Sheets.Charts.Chart) {
let title = chart.title();
title.text = 'Reports';
title.fontSize = 22;
title.fontFamily = 'Calibri normal';
chart.title(title);
}
changeChartAxes(chart: GC.Spread.Sheets.Charts.Chart) {
let axes = chart.axes();
axes.primaryCategory.style.color = '#666';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);
}
changeChartSeries(chart: GC.Spread.Sheets.Charts.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);
}
changeMarker(chart: GC.Spread.Sheets.Charts.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);
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
