You can customize the color scheme of the chart using the code such as the following:
You can customize your own color scheme using the code such as the following:
You can use static method to get a specified color by color scheme by using the code such as the following:
Please note that, change the color scheme will not change the current series or data points color.
It will only take effects when add new series or data points.
If you want the color scheme take effects immediately, you could reset the series or data points color using the code such as the following:
// @ts-ignore
import { Component, NgModule, enableProdMode } from '@angular/core';
// @ts-ignore
import { BrowserModule } from '@angular/platform-browser';
// @ts-ignore
import { FormsModule } from '@angular/forms';
// @ts-ignore
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// @ts-ignore
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';
function resetSeriesColor (chart, colorScheme) {
let series = chart.series().get();
for (let i = 0, len = series.length; i < len; i++) {
let seriesItem = series[i];
seriesItem.backColor = GC.Spread.Sheets.Charts.getColor(colorScheme, i, len);
chart.series().set(i, seriesItem);
}
}
function getActiveCharts (spread) {
let sheet = spread.getActiveSheet();
let charts = sheet.charts.all(), selectedCharts = [];
for (let i = 0, len = charts.length; i < len; i++) {
if (charts[i].isSelected()) {
selectedCharts.push(charts[i]);
}
}
return selectedCharts;
}
function getBuiltInColorScheme (key) {
return GC.Spread.Sheets.Charts.ColorSchemes[key];
}
function resetChartsColorScheme (selectedCharts, colorScheme) {
if (!colorScheme || selectedCharts.length === 0) {
return;
}
selectedCharts.forEach((selectedChart) => {
selectedChart.colorScheme(colorScheme);
resetSeriesColor(selectedChart, colorScheme);
});
}
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initSpread($event: any) {
let spread = this.spread = $event.spread;
this.setSettings(spread);
}
setSettings (spread: GC.Spread.Sheets.Workbook) {
let sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [[null,'a1','a2','a3','a4','a5','a6','a7','a8','a9'],
['b1',3,4,7,8,10,12,14,16,18],
['b2',1,9,2,5,5.5,6,6.5,7,7.5]]);
let chart = sheet.charts.add("chart2", GC.Spread.Sheets.Charts.ChartType.columnClustered, 100, 100, 300, 300, "A1:J3", GC.Spread.Sheets.Charts.RowCol.columns, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);
chart.isSelected(true);
let theme = sheet.currentTheme();
let builtInColorSchemesDom = document.getElementById('built-in-color-schemes');
let colorSchemes = GC.Spread.Sheets.Charts.ColorSchemes;
Object.keys(colorSchemes).forEach((key) => {
let colorScheme = colorSchemes[key];
let colorSchemeDom = document.createElement("div");
colorSchemeDom.className = "color-scheme";
colorSchemeDom.dataset.key = key;
for (let i = 0; i < 6; i++) {
let colorSchemeItemDom = document.createElement("div");
colorSchemeItemDom.className = "color-item";
colorSchemeItemDom.style.backgroundColor = theme.getColor(GC.Spread.Sheets.Charts.getColor(colorScheme, i, 6));
colorSchemeItemDom.dataset.key = key;
colorSchemeDom.appendChild(colorSchemeItemDom);
}
builtInColorSchemesDom.appendChild(colorSchemeDom);
});
}
applySetting ($event) {
let key = $event.target.dataset && $event.target.dataset.key;
let colorScheme = getBuiltInColorScheme(key);
let selectedCharts = getActiveCharts(this.spread);
resetChartsColorScheme(selectedCharts, colorScheme);
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
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-spread-sheets>
<div class="options-container">
<p>Select a built in color scheme to reset the selected charts' color scheme.</p>
<div id="built-in-color-schemes" (click)="applySetting($event)">
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
label {
display: inline-block;
width: 80px;
}
.settings-row {
width: 100%;
height: 30px;
font-size: 13px;
}
#color-rule {
width: 150px;
}
.color-input {
width: 30px;
height: 30px;
margin: 5px;
display: inline-block;
}
#built-in-color-schemes {
height: 80%;
overflow-y: scroll;
overflow-x: clip;
border: black 1px solid;
}
#colors-list {
min-height: 40px;
margin-bottom: 10px;
border: black 1px solid;
}
.color-scheme {
width: 256px;
height: 40px;
}
.color-scheme:hover {
background-color: #CCCCCC;
}
.color-item {
width: 34px;
height: 34px;
margin: 2px;
display: inline-block;
}
(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);
