원형 차트
원형 차트는 각 범주의 상대적 기여도를 파이 조각 형태로 나타내는 원형 그래프입니다. 이 차트는 0이 아닌 양의 값을 가진 단일 계열 데이터를 시각화하는 데 사용됩니다.
SpreadJS는 다양한 종류의 원형 차트를 지원하며, 색상 팔레트, 그래프 투명도, 시작 각도, 반지름, 원호의 길이(sweep) 등과 같은 속성을 수정하여 차트를 사용자 정의할 수 있습니다. 이러한 설정은 코드 또는 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 적용할 수 있습니다.
이 문서의 모든 샘플은 "데이터 차트 생성하기" 페이지에서 설명된 "salesTable" 데이터를 기반으로 합니다. 따라서 해당 페이지에서 데이터 차트를 추가하는 기본 단계를 먼저 완료해야 합니다. 또한, 필요에 따라 데이터 소스를 자유롭게 사용자 정의할 수 있습니다.
원형 차트
원형 차트는 숫자 비율을 시각화하기 위해 원을 여러 조각으로 나눈 통계 그래픽입니다. 각 조각은 전체에서 차지하는 비율을 나타내며, 조각의 크기는 해당하는 수치 값에 비례합니다.
아래 이미지는 원형 차트의 예시입니다:
다음 샘플 코드는 원형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 원형 차트
const sheet = spread.getActiveSheet();
sheet.name("Pie Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Pie Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.pie,
encodings: {
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
color: {
field: "Product"
},
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial,
innerRadius: 0
}
}
]
});도넛형 차트
도넛형 차트는 원형 차트의 변형으로, 중앙에 구멍이 있어 도넛 모양을 띠는 차트입니다. 이 차트는 데이터를 고리 형태로 표현하며, 각 고리는 하나의 데이터 계열(series)을 나타냅니다. 원형 차트와 마찬가지로, 각 조각의 크기는 해당 데이터의 비율에 따라 결정됩니다.
아래 이미지는 도넛형 차트의 예시입니다:
다음 샘플 코드는 도넛형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 도넛형 차트
const sheet = spread.getActiveSheet();
sheet.name("Donut Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Donut Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.donut,
encodings: {
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
color: {
field: "Product"
},
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial,
innerRadius: 0.6
}
}
]
});장미형 차트
장미형 차트는 데이터를 원형 형태로 시각화하는 기법으로, 원형 차트와 유사하지만 각 조각이 중심에서 바깥쪽으로 뻗는 형태로 표현됩니다. 일반적인 원형 차트처럼 동일한 중심점을 기준으로 조각이 배치되기보다는, 장미형 차트에서는 각 "꽃잎(petal)" 또는 세그먼트가 중심에서부터 퍼져나가며 그 길이가 해당 카테고리의 값을 나타냅니다.
세그먼트의 각도는 일반적으로 서로 다른 카테고리나 그룹을 구분하는 데 사용되며, 이를 통해 유사한 데이터 간의 차이를 쉽게 식별할 수 있습니다.
아래 이미지는 장미형 차트의 예시입니다:
다음 샘플 코드는 장미형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 장미형 차트
const sheet = spread.getActiveSheet();
sheet.name("Rose Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400);
dataChart3.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Rose Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.rose,
encodings: {
category: {
field: "Salesman"
},
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
filter: {
operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
conditions: [
{
field: "Region",
excludeMatched: false,
operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
value: ["East"]
}
]
}
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial,
innerRadius: 0.25
}
}
]
});방사형 누적 원형 차트
방사형 누적 원형 차트는 누적 가로 막대형 차트와 원형 차트의 요소를 결합한 형태입니다. 이 차트는 원형 차트처럼 원형 구조로 데이터를 표현하지만, 각 세그먼트가 방사형으로 겹쳐 쌓이는 방식으로 구성됩니다.
즉, 일반적인 원형 차트는 동일한 반지름에서 데이터를 표현하지만, 방사형 누적 원형 차트는 중심에서 바깥쪽으로 세그먼트를 누적하여 다양한 계열(series) 또는 값의 변화를 표현합니다.
아래 이미지는 방사형 누적 원형 차트의 예시입니다:
다음 샘플 코드는 방사형 누적 원형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 방사형 누적 원형 차트
const sheet = spread.getActiveSheet();
sheet.name("Radial Stacked Bar Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Radial Stacked Bar Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.radialStackedBar,
encodings: {
category: {
field: "Salesman"
},
details: [{
field: "Product"
}],
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
filter: {
operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
conditions: [
{
field: "Region",
excludeMatched: false,
operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
value: ["East"]
}
]
}
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial
}
}
]
});선버스트 차트
선버스트 차트는 계층적 데이터를 원형 형태로 시각화하는 차트입니다. 다단계 원형 차트와 유사하지만, 계층 구조를 동심원 형태로 표현하는 것이 특징입니다. 각 원형 링은 계층 구조의 서로 다른 수준을 나타내며, 중심에 가까운 링일수록 상위 계층을 의미하고, 바깥쪽으로 갈수록 하위 카테고리나 세부 항목을 나타냅니다.
즉, 가장 안쪽 원은 최상위 계층을, 이후 바깥으로 확장되는 링들은 점차 하위 계층을 나타냅니다. 이로 인해 데이터의 전체 구조를 한눈에 파악할 수 있고, 각 수준 간의 비율 및 관계를 시각적으로 쉽게 이해할 수 있습니다.
아래 이미지는 선버스트 차트의 예시입니다:
다음 샘플 코드는 선버스트 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 선버스트 차트
const sheet = spread.getActiveSheet();
sheet.name("Sunburst Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Sunburst Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.sunburst,
encodings: {
details: [
{
field: "Region"
},
{
field: "Salesman"
}
],
values: [
{
field: "Return",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
]
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial
}
}
]
});극 좌표 막대 차트
극 좌표 막대 차트는 데이터를 중심점에서 방사형으로 뻗는 막대를 사용하여 표현하는 차트입니다. 일반적인 직교 좌표계 기반의 막대 차트와 달리, 극 좌표 막대 차트에서는 각도가 축 역할을 하며 막대들이 원형으로 배치됩니다.
이러한 차트는 주기성이나 방향성이 중요한 데이터를 시각화하는 데 적합하며, 예를 들어 하루 중 특정 시간대별 활동량, 월별 계절성 트렌드 등을 표현할 때 효과적입니다.
아래 이미지는 극 좌표 막대 차트의 예시입니다:
다음 샘플 코드는 극 좌표 막대 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 극 좌표 막대 차트
const sheet = spread.getActiveSheet();
sheet.name("Bar Chart In Polar Coordinates");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Bar Chart In Polar Coordinates"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.polarCoordinatesBar,
encodings: {
category: {
field: "Salesman"
},
color: {
field: "Product"
},
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
filter: {
operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
conditions: [
{
field: "Region",
excludeMatched: false,
operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
value: ["North"]
}
]
}
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial
}
}
]
});극 좌표 누적 막대 차트
극 좌표 누적 막대 차트는 누적 막대 차트와 극 좌표계의 특징을 결합한 차트 유형입니다. 이 차트에서는 여러 데이터 시리즈 또는 범주가 중심점에서 방사형으로 뻗은 막대 위에 누적되어 표시됩니다. 각 범주는 원을 따라 배치되며, 범주 내의 각 데이터 시리즈는 누적된 막대로 표현됩니다.
이러한 차트는 주기성 데이터를 여러 시리즈로 나누어 표현하거나, 시간대별 누적 비교 등 다양한 데이터 분해를 시각화할 때 효과적입니다.
아래 이미지는 극 좌표 누적 막대 차트의 예시입니다:
다음 샘플 코드는 극 좌표 누적 막대 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 극 좌표 누적 막대 차트
const sheet = spread.getActiveSheet();
sheet.name("Stacked Bar Chart In Polar Coordinates");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Stacked Bar Chart In Polar Coordinates"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.polarCoordinatesStackedBar,
encodings: {
category: {
field: "Salesman"
},
details: [{
field: "Product"
}],
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
filter: {
operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
conditions: [
{
field: "Region",
excludeMatched: false,
operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
value: ["East"]
}
]
}
},
config: {
axisMode: GC.Spread.Sheets.DataCharts.AxisMode.radial
}
}
]
});