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:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</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"></div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
let spread;
const 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);
}
};
const getActiveCharts = (spreadInstance) => {
const sheet = spreadInstance.getActiveSheet();
const charts = sheet.charts.all();
return charts.filter(chart => chart.isSelected());
};
const getBuiltInColorScheme = (key) => {
return GC.Spread.Sheets.Charts.ColorSchemes[key];
};
const resetChartsColorScheme = (selectedCharts, colorScheme) => {
if (!colorScheme || selectedCharts.length === 0) return;
selectedCharts.forEach(selectedChart => {
selectedChart.colorScheme(colorScheme);
resetSeriesColor(selectedChart, colorScheme);
});
};
const initSpread = (spreadInstance) => {
spread = spreadInstance;
setSettings(spreadInstance);
};
const setSettings = (spreadInstance) => {
const sheet = spreadInstance.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],
]);
const 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);
const theme = sheet.currentTheme();
const builtInColorSchemesDom = document.getElementById('built-in-color-schemes');
const colorSchemes = GC.Spread.Sheets.Charts.ColorSchemes;
Object.keys(colorSchemes).forEach(key => {
const colorScheme = colorSchemes[key];
const colorSchemeDom = document.createElement('div');
colorSchemeDom.className = 'color-scheme';
colorSchemeDom.dataset.key = key;
for (let i = 0; i < 6; i++) {
const 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);
});
};
const applySetting = (event) => {
const key = event.target.dataset && event.target.dataset.key;
const colorScheme = getBuiltInColorScheme(key);
const selectedCharts = getActiveCharts(spread);
resetChartsColorScheme(selectedCharts, colorScheme);
};
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
#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;
}
</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);
