[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

색상 스키마 적용 및 사용자 정의

색 구성표는 차트의 외관을 향상시키기 위해 사용하는 일련의 조화로운 색상 집합입니다. 차트의 색 구성표를 원하는 대로 변경하려면 GC.Spread.Sheets.Charts클래스의 colorScheme 속성을 사용하세요.


아래 GIF는 차트에 다양한 색 구성표를 적용하는 모습을 보여줍니다.



기본 제공 색 구성표 적용하기

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과 유사하게, 색 목록의 가장 어두운 색과 가장 밝은 색 사이에서 균등하게 간격을 둔 인덱스 위치의 색을 선택하여 차트 시리즈에 적용합니다.

Color List 1, Color List 2와 같은 여러 개의 색 목록이 있는 경우, Color List 1의 가장 어두운 색, Color List 2의 가장 어두운 색 순서대로 번갈아 색을 선택합니다.

withinLinearReversed

withinLinear과 반대로, 색 목록의 가장 밝은 색에서 가장 어두운 색까지의 범위에서 균등하게 간격을 둔 인덱스 위치의 색을 선택하여 차트 시리즈에 적용합니다.

acrossLinearReversed

acrossLinear의 반대로, 색 목록의 가장 밝은 색에서 가장 어두운 색까지의 범위에서 균등하게 간격을 둔 인덱스 위치의 색을 선택하여 차트 시리즈에 적용합니다.

Color List 1, Color List 2와 같은 여러 개의 색 목록이 있는 경우, Color List 1의 가장 밝은 색, Color List 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);
        }
}