应用和自定义配色方案

颜色方案

颜色方案是一组协调颜色，用于增强图表的外观。要根据您的偏好更改图表的颜色方案，请使用 GC.Spread.Sheets.Charts 类的 ColorScheme 属性。

下面的 GIF 显示了对图表应用不同颜色方案的效果。

Chart-ColorScheme.9f1933

应用内置颜色方案

SpreadJS 允许您使用任何内置选项（如 colorfulPalette1、colorfulPalette2、colorfulPalette3、monochromaticPalette1、monochromaticPalette2、monochromaticPalette3 等）轻松应用图表的内置颜色方案。图表的默认颜色方案是 colorfulPalette1。

下面的代码示例演示了如何应用内置颜色方案：

// 应用颜色方案。
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
chart.colorScheme(GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);

自定义颜色方案

您可以使用 GC.Spread.Sheets.Charts.ColorRule 枚举自定义颜色方案。下表列出了可用的 ColorRule 枚举值：

ColorRule	描述
cycle	从颜色列表中按顺序选择颜色并应用到图表中的每个系列。当选择到最后一个颜色时，从第一个颜色重新开始。
withinLinear	在颜色列表中从最暗到最亮的颜色之间以均匀间隔位置选择颜色，并将这些颜色应用到图表系列中。
acrossLinear	类似于 `withinLinear`，在颜色列表中从最暗到最亮的颜色之间以均匀间隔位置选择颜色，并将颜色应用到图表系列中。如果有多个颜色列表，如颜色列表 1 和颜色列表 2，颜色会按顺序从颜色列表 1 和颜色列表 2 的最暗色到最亮色交替选择。
withinLinearReversed	在颜色列表中从最亮到最暗的颜色之间以均匀间隔位置选择颜色，并将它们应用到图表系列中，与 `withinLinear` 相反。
acrossLinearReversed	与 `acrossLinear` 相反，在颜色列表中从最亮到最暗的颜色之间以均匀间隔位置选择颜色，并将它应用到图表系列中。如果有多个颜色列表，如颜色列表 1 和颜色列表 2，颜色会按顺序从颜色列表 1 和颜色列表 2 的最亮色到最暗色交替选择。

下面的代码示例演示了如何定义和应用自定义颜色方案：

// 自定义颜色方案。
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
let myColorScheme = [GC.Spread.Sheets.Charts.ColorRule.cycle, ["#00aefe", "#3368e7", "#8e43e6", "#b74592", "#ff4f80", "#ff6d5f", "#ffc268", "#2cde98", "#1dc7d1"]];
chart.colorScheme(myColorScheme);

从自定义方案中检索颜色

您可以使用 getColor() 方法从颜色方案中获取指定的颜色。

下面的代码示例演示了如何使用 getColor() 方法从颜色方案中获取颜色：

// 自定义颜色方案。
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
let myColorScheme = [GC.Spread.Sheets.Charts.ColorRule.cycle, ["#00aefe", "#3368e7", "#8e43e6", "#b74592", "#ff4f80", "#ff6d5f", "#ffc268", "#2cde98", "#1dc7d1"]];

// 获取颜色方案中索引为3的颜色。
let color = GC.Spread.Sheets.Charts.getColor(myColorScheme, 3);

请注意，更改颜色方案不会更新现有系列或数据点的颜色。它只在您添加新系列或数据点时生效。如果您想立即应用新的颜色方案，需要按如下代码示例重置系列或数据点的颜色：

// 重置系列或数据点颜色。
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);
        }
}