颜色方案

图表支持自定义颜色方案。

您可以使用以下代码自定义图表的颜色方案: 您可以使用以下代码自定义自己的颜色方案: 您可以使用以下代码通过颜色方案获取指定颜色的静态方法: 请注意,更改颜色方案不会更改当前系列或数据点的颜色。 它只在添加新系列或数据点时生效。 如果您希望立即生效,请使用以下代码重置系列或数据点的颜色:
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; }