[]
데이터 포인트는 차트에서 연결된 데이터 범위의 한 셀에 해당하는 값 하나를 나타내는 데이터 조각입니다.
특정 의미가 있는 데이터 포인트에 특별한 스타일을 설정하면, 데이터 표현을 더욱 집중되게 만들고 차트를 더 직관적이며 효율적으로 만들 수 있습니다.
SpreadJS는 차트 유형에 따라 시리즈의 데이터 포인트 스타일을 사용자 지정할 수 있는 기능을 제공합니다.
이를 위해 GC.Spread.Sheets.Charts.IDataPointStyle 인터페이스를 사용하여 다양한 속성을 정의할 수 있습니다.
데이터 포인트는 각 시리즈에서 인덱스 0부터 시작하여 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다.
아래 표는 차트 유형별로 사용할 수 있는 속성들을 정리한 것입니다:
차트 유형 | 속성 |
---|---|
Column Pie / Doughnut Bar Treemap Sunburst Funnel Combo |
|
참고: 영역형 차트와 채워진 방사형 차트는 데이터 포인트를 지원하지 않으므로 해당 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);
차트 시리즈에서 데이터 포인트를 선택하면 기본적으로 전체 시리즈가 선택됩니다.
동일한 데이터 포인트를 한 번 더 선택하면, 해당 개별 데이터 포인트만 선택되어 사용자 지정을 적용할 수 있습니다.
동일한 차트 내의 다른 시리즈의 데이터 포인트를 선택하면, 해당 전체 시리즈가 다시 선택됩니다.