配色パターンの適用とカスタマイズ

配色パターンは、チャートの外観を向上させるために使用できる、調整された色のセットです。チャートの配色パターンを変更するには、GC.Spread.Sheets.Charts クラスの ColorScheme プロパティを使用します。

次の動画は、異なる配色をチャートに適用しています。

Chart-ColorScheme

組み込み配色パターンの適用

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 列挙型の値を示します。

ルール	説明
cycle	カラーリストから順番に色を選択してチャートの各系列に適用します。リスト内の最後の色が選択された後は、ふたたび先頭の色から選択します。
withinLinear	カラーリストのもっとも暗い色からもっとも明るい色の間で、色付けされるチャート系列の数で等間隔のインデックス位置にある色を選択して、チャートの系列に適用します。
acrossLinear	withinLinearと同様に、カラーリストのもっとも暗い色からもっとも明るい色の間で、色付けされるチャート系列の数で等間隔のインデックス位置にある色を選択して、チャートの系列に適用します。ただし、カラーリスト1、カラーリスト2など複数のカラーリストを持つ場合は、カラーリスト1のもっとも暗い色、カラーリスト2のもっとも暗い色の順番に、カラーリスト1とカラーリスト2を交互に、もっとも暗い色からもっとも明るい色の間で色を選択します。
withinLinearReversed	withinLinearと反対の順番で、カラーリストのもっとも明るい色からもっとも暗い色の間で、色付けされるチャート系列の数で等間隔のインデックス位置にある色を選択して、チャートの系列に適用します。
acrossLinearReversed	acrossLinearと反対に、カラーリストのもっとも明るい色からもっとも暗い色の間で、色付けされるチャート系列の数で等間隔のインデックス位置にある色を選択して、チャートの系列に適用します。カラーリスト1、カラーリスト2など複数のカラーリストを持つ場合は、カラーリスト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"]];

// 配色パターンから index が 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);
        }
}