概述
本 Demo 展示了如何应用内置颜色方案到图表，并动态重置图表系列的颜色。Demo 中创建了一个柱状图，动态生成了所有内置颜色方案的可视化色板，用户点击色板后可以立即应用到选中的图表。
实现思路
创建柱状图并设置初始颜色方案为 colorfulPalette2
遍历 GC.Spread.Sheets.Charts.ColorSchemes 获取所有内置颜色方案
为每个颜色方案生成可视化色板（显示前 6 种颜色）
监听色板点击事件，获取选中的颜色方案并应用到图表
通过 resetSeriesColor 函数重新设置所有系列的颜色，使颜色方案立即生效
代码解析
生成颜色方案色板
这段代码遍历所有内置颜色方案，为每个方案生成一个包含 6 个色块的色板。GC.Spread.Sheets.Charts.getColor() 方法用于从颜色方案中获取指定索引的颜色，然后通过主题的 getColor() 方法转换为实际的颜色值。
重置图表系列颜色
这个函数用于将颜色方案立即应用到图表的所有系列。chart.series().get() 获取所有系列，然后通过 GC.Spread.Sheets.Charts.getColor() 为每个系列分配合适的颜色，最后使用 chart.series().set() 更新系列配置。
应用颜色方案到图表
这个函数将选中的图表应用新的颜色方案。首先调用 chart.colorScheme() 设置颜色方案，然后调用 resetSeriesColor() 重置所有系列的颜色，使颜色方案立即生效。
运行效果
页面加载后显示一个柱状图和右侧的颜色方案面板
面板中展示了所有内置颜色方案的可视化色板
点击任意色板，柱状图的颜色会立即切换为对应的颜色方案
图表可以选中或取消选中，颜色方案只应用到选中的图表
API 参考
colorScheme 方法
value：可选，颜色方案对象，可以是内置方案或自定义方案
返回值：当前颜色方案或图表对象
getColor 方法
colorScheme：颜色方案对象
index：颜色索引
count：系列总数
返回值：指定索引的颜色
series 方法
返回值：SeriesCollection 对象，可用于获取、设置系列
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" />
<meta name="spreadjs culture" content="zh-cn" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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;
}
