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

차트에서 패턴 채우기

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

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

  • 데이터 포인트

  • 차트 영역 플롯

  • 데이터 영역 시리즈

  • 차트 제목

  • 데이터 레이블

  • 범례

  • 헤더 및 푸터 축

  • 축 레이블

  • 오버레이

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


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

$(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);
});