A Pie chart can be added to Spread, and the chart style can be changed using the chart API. The pie chart can only display one group of data, so use the chart.series().get() function to get the series information. Pie charts show the size of items in one data series, and the data points are shown as a percentage of the whole pie.
A Doughnut chart can be added to Spread, and the chart style can be changed using the chart API. The doughnut chart can display all series, with each shown as a ring that represents a data series.
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;
spread.suspendPaint();
let sheets = spread.sheets;
this.initPieSheet(sheets[0]);
this.initPieChart(sheets[0]);
this.initDoughnutSheet(sheets[1]);
this.initDoughnutChart(sheets[1]);
spread.resumePaint();
}
initPieSheet(sheet: GC.Spread.Sheets.Worksheet) {
sheet.name('Pie');
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
}
initPieChart(sheet: GC.Spread.Sheets.Worksheet) {
let chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
this.showPieDataLabels(chart);
this.changePieStyle(chart);
this.changeChartTitle(chart);
}
changeChartTitle(chart: GC.Spread.Sheets.Charts.Chart) {
let title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);
}
// show dataLabels
showPieDataLabels(chart: GC.Spread.Sheets.Charts.Chart) {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = true;
dataLabels.format = "0.00%";
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.bestFit;
chart.dataLabels(dataLabels);
}
//change pie color
changePieStyle(chart: GC.Spread.Sheets.Charts.Chart) {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
let seriesItem = chart.series().get(0);
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
seriesItem.border.width = 3;
chart.series().set(0, seriesItem);
}
initDoughnutSheet(sheet: GC.Spread.Sheets.Worksheet) {
sheet.name('Doughnut');
sheet.suspendPaint();
//prepare data for chart
let dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
sheet.resumePaint();
}
initDoughnutChart(sheet: GC.Spread.Sheets.Worksheet) {
let chart = sheet.charts.add('DoughnutChart1', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5");
this.changeDoughnutColor(chart);
this.changeDoughnutLegendPosition(chart);
this.changeDoughnutHoleSize(chart);
this.changeChartTitle(chart);
}
//change doughnut color
changeDoughnutColor(chart: GC.Spread.Sheets.Charts.Chart) {
let series = chart.series().get();
for (let i = 0; i < series.length; i++) {
let seriesItem = series[i];
seriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
}
}
chart.series().set(i, seriesItem);
}
}
changeDoughnutHoleSize(chart: GC.Spread.Sheets.Charts.Chart) {
let seriesItem = chart.series().get(0);
seriesItem.doughnutHoleSize = 0.3;
chart.series().set(0, seriesItem);
}
changeDoughnutLegendPosition(chart: GC.Spread.Sheets.Charts.Chart) {
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
}
}
@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-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);
