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:
function setSettings(spread) {
let sheet = spread.getActiveSheet();
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);
});
}
window.onload = function () {
let spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
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);
setSettings(spread);
bindEvents(spread);
};
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);
});
}
function bindEvents(spread) {
document.getElementById("built-in-color-schemes").addEventListener('click', function (event) {
let key = event.target.dataset && event.target.dataset.key;
let colorScheme = getBuiltInColorScheme(key);
let selectedCharts = getActiveCharts(spread);
resetChartsColorScheme(selectedCharts, colorScheme);
});
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<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">
</div>
</div>
</div>
</body>
</html>
.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;
}
