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

차트에서 패턴 채우기

SpreadJS는 차트에서 패턴 채우기(Pattern Fill)를 지원합니다. SpreadJS API의 PatternType열거형을 사용하면 워크시트 내 차트에 다양한 패턴 스타일을 적용할 수 있습니다. 또한 전경색(Foreground Color)과 배경색(Background Color)도 지정할 수 있습니다.

이 기능은 차트 요소에 패턴 채우기를 적용하여 사용자 맞춤형 시각화를 향상시키고, 특정 차트 요소를 강조하는 데 유용합니다. 패턴 채우기를 지원하는 차트 요소는 다음과 같습니다:

  • 데이터 포인트

  • 차트 영역 플롯

  • 데이터 영역 시리즈

  • 차트 제목

  • 데이터 레이블

  • 범례

  • 헤더 및 푸터 축

  • 축 레이블

  • 오버레이

SpreadJS는 총 48개의 기본 제공 패턴 스타일을 지원합니다. 아래 차트는 세계 인구를 시각화하기 위해 패턴 채우기를 적용한 예시입니다.



아래의 코드 샘플은 PatternType 속성을 사용하여 차트 요소에 패턴 채우기를 적용하는 방법을 보여줍니다.

Ask ChatGPT

$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    // 활성화시트 가져오기
    var sheet = spread.getSheet(0);

    // 열 너비 설정
    sheet.setColumnWidth(2, 100);
    sheet.setColumnWidth(4, 100);

    // 데이터 배열 생성
    var dataArray =
    [
        ['Region', 'Subregion', 'country', 'Population'],
        ['Asia', 'Southern', 'India', 1354051854],
        [, , 'Pakistan', 200813818],
        [, , 'Bangladesh', 166368149],
        [, , 'Others', 170220300],
        [, 'Eastern', 'China', 1415045928],
        [, , 'Japan', 127185332],
        [, , 'Others', 111652273],
        [, 'South-Eastern', , 655636576],
        [, 'Western', , 272298399],
        [, 'Central', , 71860465],
        ['Africa', 'Eastern', , 433643132],
        [, 'Western', , 381980688],
        [, 'Northern', , 237784677],
        [, 'Others', , 234512021],
        ['Europe', , , 742648010],
        ['Others', , , 1057117703]
    ];

    // 배열 설정
    sheet.setArray(1, 1, dataArray);
    var treemapChart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");

// 제목을 가져와 배경색에 패턴을 설정
    var title = treemapChart.title();
    title.fontSize = "24.00";
    title.text = "WORLD POPULATION";
    title.backColor = {
        type: GC.Spread.Sheets.Charts.PatternType.divot,
        foregroundColor: "Orange",
       backgroundColor: "pink",
    };
    treemapChart.title(title);

// 데이터 포인트를 가져와 patternType 설정
    var dataPoints = treemapChart.series().dataPoints();
    var fillColors = [{
            type: GC.Spread.Sheets.Charts.PatternType.sphere,
            foregroundColor: "LightGreen",
            backgroundColor: "lightgray",
        }, {
            type: GC.Spread.Sheets.Charts.PatternType.darkUpwardDiagonal,
            foregroundColor: "pink",
            backgroundColor: "white",
        },
        {
            type: GC.Spread.Sheets.Charts.PatternType.divot,
            foregroundColor: "purple",
            backgroundColor: "white",
        },
        {
            type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40,
            foregroundColor: "LightBlue",
            backgroundColor: "white",
        }
    ];
    for (var i = 0; i < fillColors.length; i++) {
        var dataPoint = dataPoints.get(i);
        dataPoint.fillColor = fillColors[i];
        dataPoints.set(i, dataPoint);
    }

// 데이터 레이블을 가져와 배경색을 검정색으로 설정
    var dataLabels = treemapChart.dataLabels();
    dataLabels.color = 'black';
    treemapChart.dataLabels(dataLabels);
});