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

데이터 포인트

데이터 포인트는 차트에서 연결된 데이터 범위의 한 셀에 해당하는 값 하나를 나타내는 데이터 조각입니다.

특정 의미가 있는 데이터 포인트에 특별한 스타일을 설정하면, 데이터 표현을 더욱 집중되게 만들고 차트를 더 직관적이며 효율적으로 만들 수 있습니다.

데이터 포인트 스타일 사용자 지정

SpreadJS는 차트 유형에 따라 시리즈의 데이터 포인트 스타일을 사용자 지정할 수 있는 기능을 제공합니다.

이를 위해 GC.Spread.Sheets.Charts.IDataPointStyle 인터페이스를 사용하여 다양한 속성을 정의할 수 있습니다.




데이터 포인트는 각 시리즈에서 인덱스 0부터 시작하여 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다.


아래 표는 차트 유형별로 사용할 수 있는 속성들을 정리한 것입니다:

차트 유형

속성

Column

Pie / Doughnut

Bar

Treemap

Sunburst

Funnel

Combo

backColor

backColorTransparency

border.color

border.transparency

border.width

border.lineType

참고: 영역형 차트와 채워진 방사형 차트는 데이터 포인트를 지원하지 않으므로 해당 API는 작동하지 않습니다.

또한, 선버스트 및 트리 맵 차트의 backColor와 backColorTransparency 속성은 이전 버전의 데이터 포인트 스타일 구조에서도 설정할 수 있습니다.

다음 코드 샘플은 원형 차트에서 각 데이터 포인트에 서로 다른 배경색을 적용하는 방법을 보여줍니다.

// Configure Workbook and Worksheet
var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 4 });
var activeSheet = spread.getActiveSheet();

// 차트 데이터 설정
var pieData = [
    ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
    ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
spread.sheets[1].setArray(0, 0, pieData);
var dataRange = new GC.Spread.Sheets.Range(0, 0, 2, 8);

// 파이 차트 생성
var pieChart = spread.sheets[1].charts.add('Pie Chart', GC.Spread.Sheets.Charts.ChartType.pie, 2, 50, 600, 350, "A1:H2");
pieChart.title({
    text: "Browser Market Share"
});
var pieStyle = pieChart.series().get(0);
            
// 데이터 포인트 스타일 사용자 지정
pieStyle.dataPoints = {
    0: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
            foregroundColor: "white",
            backgroundColor: "LightBlue",
        },
        backColorTransparency: 0.1,
    },
    1: {
        backColor: "Yellow",
    },
    2: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.trellis,
            foregroundColor: "white",
            backgroundColor: "Green",
        }
    },
    3: {
        backColor: "Orange",
    },
    4: {
        backColor: "Red",
        backColorTransparency: 0.5,
    },
    5: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.narrowVertical,
            foregroundColor: "white",
            backgroundColor: "Purple",
        }
    },
};

pieChart.series().set(0, pieStyle);

차트 시리즈에서 데이터 포인트를 선택하면 기본적으로 전체 시리즈가 선택됩니다.

동일한 데이터 포인트를 한 번 더 선택하면, 해당 개별 데이터 포인트만 선택되어 사용자 지정을 적용할 수 있습니다.

동일한 차트 내의 다른 시리즈의 데이터 포인트를 선택하면, 해당 전체 시리즈가 다시 선택됩니다.