차트 축
축(Axes)은 차트에서 데이터를 표시할 때 스케일과 차원을 이해하는 데 도움이 되는 선을 의미합니다. 수평 축(x축)과 수직 축(y축)은 시간, 수량, 백분율 등의 데이터를 표시하는 데 사용됩니다. IAxisOption 인터페이스를 사용하여 데이터 차트에서 축의 외관과 동작을 정의할 수 있습니다.
축 속성
IAxisOption 인터페이스에서 설정 가능한 주요 축 속성은 아래와 같습니다.
속성 | 설명 | 샘플 미리보기 |
|---|---|---|
type | 축 유형을 "범주 축(Category Axis)" 또는 "값 축(Value Axis)"으로 정의합니다. 차트 유형 및 좌표계(예: Cartesian 또는 Polar)에 따라 동작이 달라질 수 있습니다. |
|
labels | 축 레이블의 표시 여부를 제어합니다. 기본 동작은 차트 유형에 따라 달라질 수 있으며, 기본값을 재정의하려면 명시적 설정이 필요합니다. |
|
axisLine | 축 선의 표시 여부를 결정합니다. 데이터 차트는 차트 유형에 따라 서로 다른 기본값을 제공합니다. 기본값을 재정의하려면 명시적 설정이 필요합니다. |
|
reversed | 축의 방향을 반대로 설정합니다. |
|
title | 단위 또는 기타 설명을 포함한 축 제목을 지정합니다. |
|
max & min | 축 범위의 최대값과 최소값을 설정합니다. |
|
position | 데이터 차트에서 축의 위치를 결정합니다. |
|
format | 축의 형식 정보를 설정합니다. 데이터 단위 및 형식 문자열을 포함합니다. |
|
majorUnit & minorUnit | 눈금 간격을 설정합니다.
|
|
labelAngle | 축 레이블의 회전 각도를 설정합니다 (범위: -90 ~ 90도). 현재 이 속성은 배열의 첫 번째 요소에만 적용됩니다. |
|
labelStyle | 축 레이블의 텍스트 스타일을 정의합니다. |
|
titleStyle | 축 제목의 스타일을 지정합니다. |
|
lineStyle | 축 선의 외관을 설정합니다. |
|
majorTickSize & minorTickSize | 현재 축의 주요 및 보조 눈금 길이를 설정합니다. 주요 및 보조 눈금은 축에서 데이터 포인트의 위치를 파악하는 데 도움을 줍니다.
지원되는 값: none, inside, outside, cross |
|
majorGrid & minorGrid | 데이터 해석을 향상시키기 위해 설정됩니다. 일반적으로 더 세밀한 숫자 간격을 나타내어 사용자가 데이터를 보다 정밀하게 확인할 수 있도록 합니다. 기본값은 차트 유형에 따라 달라질 수 있으며, 예를 들어 "파이" 차트에서는 기본적으로 그리드 라인이 표시되지 않습니다.
주요 그리드 라인과 눈금은 각 주요 단위마다 그려지며, 보조 그리드 라인과 눈금은 각 보조 단위마다 그려집니다. 기본적으로 각 주요 단위는 하나의 보조 그리드 라인과 눈금으로 구분됩니다. |
|
majorGridStyle & minorGridStyle | 주요 및 보조 그리드 라인의 스타일 정보를 설정합니다. |
|
dateMode | 산점도 및 버블 차트와 같은 데이터 차트에서 축의 시간 간격을 설정합니다. |
|
날짜 및 순서형 눈금
날짜 필드가 범주에 바인딩된 경우 범주 축을 순서형 축 또는 날짜 축으로 렌더링할 수 있습니다.
순서형 축은 각 날짜 값 또는 날짜 그룹을 하나의 범주로 취급하고 범주를 동일한 간격으로 배치합니다. 날짜 필드가 범주에 바인딩된 경우의 기본 동작입니다.
날짜 축은 값을 연속적인 시간 눈금으로 렌더링합니다. 데이터 요소 사이의 간격에 실제 시간 간격을 반영하려면 날짜 눈금을 사용합니다.
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
scale: {
type: GC.Spread.Sheets.DataCharts.ValueScaleType.date
}
}]
}]
}범주 인코딩에서 dateMode를 설정하면 날짜 값이 그룹화되는 방식을 제어할 수 있습니다. 축 눈금을 설정하면 이렇게 그룹화된 값이 렌더링되는 방식을 제어할 수 있습니다.
범주 인코딩에 사용자 지정 정렬이 적용된 경우 지정된 범주 순서를 유지할 수 있도록 범주 축은 순서형 렌더링을 사용합니다.
축에서 날짜 눈금을 사용하는 경우 축의 날짜 간격은 범주 인코딩에서 사용되는 가장 세분화된
dateMode에 맞춰 자동으로 조정됩니다. 고급 API 구성에서는 축dateMode를 범주dateMode보다 더 크거나 작은 단위로 설정할 수 있습니다.
날짜 축 서식
날짜 축 레이블은 날짜 그룹화 및 축 눈금과 별도로 서식을 지정할 수 있습니다. 서식 문자열은 레이블이 표시되는 방식만 변경합니다. 기본 날짜 값, 범주 그룹화, 정렬 또는 축 동작은 변경하지 않습니다.
예를 들어 날짜 값이 월별로 그룹화된 경우 레이블을 월 이름으로 표시할 수 있습니다.
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
format: {
value: "MMM"
}
}]
}]
}날짜 서식은 분기 토큰도 지원합니다.
토큰 | 설명 | 예제 |
|---|---|---|
| 숫자 형식 분기 |
|
| 0으로 채운 분기 |
|
| 축약된 분기 레이블 |
|
| 전체 분기 레이블 |
|
| 좁은 형식의 분기 레이블 |
|
분기 레이블은 차트 로캘에 따라 현지화됩니다.
코드 사용 예시
다음 샘플 코드를 참조하여 데이터 차트에서 축을 구성하고 사용자 정의할 수 있습니다.
이 샘플은 "데이터 차트 생성하기" 페이지에서 언급된 "salesTable" 데이터를 사용하므로, 해당 페이지에서 설명된 기본 단계를 완료하여 데이터 차트를 설정한 후 아래 코드를 사용할 수 있습니다. 또한, 필요에 따라 데이터 소스를 자유롭게 사용자 정의할 수 있습니다.
// 1. 축 유형
const sheet = spread.getSheet(0);
sheet.name("Axis Type");
sheet.setValue(4, 0, "Cartesian Coordinate System");
sheet.setValue(23, 0, "Polar coordinate system");
const dataChart = sheet.dataCharts.add('data-chart', 200, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.x, // GC.Spread.Sheets.DataCharts.AxisType
title: "X-Axis Title" // string
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
title: "Y-Axis Title"
}
]
}]
}
});
const dataChart2 = sheet.dataCharts.add('data-chart-2', 200, 320, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.polarCoordinatesBar,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' },
},
}
]
});
// 2. 레이블
let sheet2 = spread.getSheet(1);
sheet2.name("Labels");
sheet2.setValue(16, 0, "The X-Axis Labels are Hidden");
const dataChart3 = sheet2.dataCharts.add('data-chart-3', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// x축 라벨 숨김
labels: false // boolean
},
]
}]
}
});
// 3. 축 선
let sheet3 = spread.getSheet(2);
sheet3.name("Axis Line");
sheet3.setValue(16, 0, "AxisLine is hidden for X-Axis");
const dataChart4 = sheet3.dataCharts.add('data-chart-4', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart4.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// X 축에 대한 AxisLine 숨김
axisLine: false // Boolean
},
]
}]
}
});
//4. 축 뒤집기
let sheet4 = spread.getSheet(3);
sheet4.name("Axis Reversed");
sheet4.setValue(16, 0, "The direction of the Y-Axis is Reversed");
const dataChart5 = sheet4.dataCharts.add('data-chart-5', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart5.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
// y축 위치 뒤집음
reversed: true // Boolean
},
]
}]
}
});
//5. 축 제목
let sheet5 = spread.getSheet(4);
sheet5.name("Axis Title");
sheet5.setValue(16, 0, "The title 'Sales (in USD)' is set for the Y-Axis.");
const dataChart6 = sheet5.dataCharts.add('data-chart-6', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart6.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
// y축에 대한 제목 설정
title: "Sales (in USD)" // string
},
]
}]
}
});
//6. Max 및 Min
let sheet6 = spread.getSheet(5);
sheet6.name("Max and Min");
sheet6.setValue(16, 0, "No Max and Min");
sheet6.setValue(16, 10, "Y-Axis Max Value: 4500");
sheet6.setValue(17, 10, "Y-Axis Min Value: 3000");
const dataChart7 = sheet6.dataCharts.add('data-chart-7', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart7.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
});
const dataChart8 = sheet6.dataCharts.add('data-chart-8', 610, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart8.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
max: { // y 축에 대한 최대 값 설정
type: GC.Spread.Sheets.DataCharts.ValueOptionType.number, // ValueOptionType
value: 4500 // number
},
min: { // x축에 대한 최소값 설정
type: GC.Spread.Sheets.DataCharts.ValueOptionType.number,
value: 3000
}
}]
}]
}
});
//7. 위치
let sheet7 = spread.getSheet(6);
sheet7.name("Position");
sheet7.setValue(16, 0, "Axis Position of the X-Axis is set to 'Far'")
const dataChart9 = sheet7.dataCharts.add('data-chart-9', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart9.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
position: GC.Spread.Sheets.DataCharts.AxisPosition.far
}]
}]
}
});
//8. 원점
let sheet8 = spread.getSheet(7);
sheet8.name("Origin");
sheet8.setValue(17, 0, "The Origin of the X-Axis is set to 2000");
sheet8.setValue(17, 10, "The Origin of the Y-Axis is set to 2.3");
const dataChart10 = sheet8.dataCharts.add('data-chart-10', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart10.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// X축의 위치가 설정되면, 데이터는 Y축 스케일에 맞춰짐
origin: 2000, // 숫자
}]
}]
}
});
const dataChart11 = sheet8.dataCharts.add('data-chart-11', 610, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart11.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
// y축을 배치할 때, 데이터셋은 x축 스케일에 맞춰짐
// 하지만 x축은 숫자가 아닌 범주형 값인 경우가 많으므로, 카테고리 수에 따라 균등하게 나뉨
// 시작 항목의 위치가 1로 설정되고 각 항목 간 간격은 1단위로 설정됨
origin: 2.3, // y축의 기준(origin)을 설정함
}]
}]
}
});
// 9. 서식
let sheet9 = spread.getSheet(8);
sheet9.name("Format");
sheet9.setValue(17, 0, "The format of the Y-Axis is $0.0 K");
const dataChart12 = sheet9.dataCharts.add('data-chart-12', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart12.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
format: {
type: GC.Spread.Sheets.DataCharts.FormatType.thousands,
value: "$0.0 K"
}
}]
}]
}
});
// 10. Major 과 Minor 단위
let sheet10 = spread.getSheet(9);
sheet10.name("Major and Minor Unit");
sheet10.setValue(17, 0, "Y-Axis Major Unit: 1000");
sheet10.setValue(18, 0, "X-Axis Major Unit: 2");
const dataChart13 = sheet10.dataCharts.add('data-chart-13', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart13.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
// 현재 축의 스케일이 숫자(Number) 타입일 경우, 값을 직접 설정.
majorUnit: {
value: 1000
},
},
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// 스케일이 숫자(Number) 또는 날짜(Date) 타입이 아닌 경우에도 값을 직접 설정할 수 있으며
// 각 범주 값 간 간격은 1단위로 설정됨
majorUnit: {
value: 2
},
}]
}]
}
});
// 11. 레이블 각과 레이블 스타일
let sheet11 = spread.getSheet(10);
sheet11.name("Label Angle And Label Style");
sheet11.setValue(17, 0, "For X-Axis, the Label Angle is 50");
const dataChart14 = sheet11.dataCharts.add('data-chart-14', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart14.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
labelAngle: [50], // 회전 각도, 값 범위는 -90 ~ 90
labelStyle: { // ILabelStyleOption
color: "red",
fontSize: 16,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
overflow: GC.Spread.Sheets.DataCharts.TextOverflow.ellipsis
},
}]
}]
}
});
// 12. 제목 스타일
let sheet12 = spread.getSheet(11);
sheet12.name("Title Style");
sheet12.setValue(17, 0, "Title Style Has Been Applied");
const dataChart15 = sheet12.dataCharts.add('data-chart-15', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart15.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
title: "Category Title", // 문자열
// X-Axis 에 제목 스타일 용
titleStyle: { // ILabelStyleOption
color: "red",
fontSize: 16,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
fontWeight: "Bold",
}
}]
}]
}
});
// 13. 선 스타일
let sheet13 = spread.getSheet(12);
sheet13.name("Line Style");
sheet13.setValue(17, 0, "Line Style Has Been Applied To X-Axis");
const dataChart16 = sheet13.dataCharts.add('data-chart-16', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart16.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// X축에 선 스타일 적용
lineStyle: {
stroke: { type: "CssColor", color: "#9f3434" },
strokeWidth: 2,
strokeDasharray: "5,5",
}
}]
}]
}
});
// 14. MajorTickSize 및 MinorTickSize
let sheet14 = spread.getSheet(13);
sheet14.setColumnCount(30);
sheet14.name("MajorTickSize and MinorTickSize");
sheet14.setValue(17, 0, "For X-Axis: ");
sheet14.setValue(18, 0, "MinorTickSize: 10");
sheet14.setValue(19, 0, "MinorTick: Inside");
sheet14.setValue(20, 0, "Major Tick: None");
sheet14.setValue(17, 10, "For X-Axis: ");
sheet14.setValue(18, 10, "MinorTickSize: 10");
sheet14.setValue(19, 10, "MinorTick: Outside");
sheet14.setValue(20, 10, "Major Tick: None");
sheet14.setValue(17, 19, "For X-Axis: ");
sheet14.setValue(18, 19, "MinorTickSize: 10");
sheet14.setValue(19, 19, "MinorTick: Cross");
sheet14.setValue(20, 19, "Major Tick: None");
const dataChart17 = sheet14.dataCharts.add('data-chart-17', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart17.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
minorTickSize: 10,
minorTicks: GC.Spread.Sheets.DataCharts.TickMark.inside,
majorTicks: GC.Spread.Sheets.DataCharts.TickMark.none
}]
}]
}
});
const dataChart18 = sheet14.dataCharts.add('data-chart-18', 600, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart18.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
minorTickSize: 10,
minorTicks: GC.Spread.Sheets.DataCharts.TickMark.outside,
majorTicks: GC.Spread.Sheets.DataCharts.TickMark.none
}]
}]
}
});
const dataChart19 = sheet14.dataCharts.add('data-chart-19', 1150, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart19.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
minorTickSize: 10,
minorTicks: GC.Spread.Sheets.DataCharts.TickMark.cross,
majorTicks: GC.Spread.Sheets.DataCharts.TickMark.none
}]
}]
}
});
// 15. Major 그리드 및 Minor 그리드
let sheet15 = spread.getSheet(14);
sheet15.setColumnCount(30);
sheet15.name("Major Grid Line and Minor Grid Line");
sheet15.setValue(17, 0, "For Y-Axis: ");
sheet15.setValue(18, 0, "MajorGridLine: False");
sheet15.setValue(19, 0, "MinorGridLine: true");
const dataChart20 = sheet15.dataCharts.add('data-chart-20', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart20.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
// 주요 및 보조 격자선 설정
majorGrid: false, // boolean
minorGrid: true, // boolean
}]
}]
}
});
// 16. MajorGridStyle 및 MinorGridStyle
let sheet16 = spread.getSheet(15);
sheet16.setColumnCount(30);
sheet16.name("MajorGridStyle and MinorGridStyle");
sheet16.setValue(17, 0, "Major Grid Style has been applied");
const dataChart21 = sheet16.dataCharts.add('data-chart-21', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart21.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' }
},
}
],
config: {
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
majorGridStyle: {
stroke: { type: "CssColor", color: "red" },
strokeWidth: 2,
strokeDasharray: "5,5",
}
}]
}]
}
});
// 17. 날짜 모드
// 데이터 매니저에 테이블 추가
const sales2Table = createSales2Table(dataManager);
await sales2Table.fetch();
let sheet17 = spread.getSheet(16);
sheet17.setColumnCount(30);
sheet17.name("Date Mode");
sheet17.setValue(17, 0, "Major Unit Value: 2");
sheet17.setValue(18, 0, "Date Type: Year");
sheet17.setValue(17, 10, "Major Unit Value: 5");
sheet17.setValue(18, 10, "Date Type: Month");
const dataChart22 = sheet17.dataCharts.add('data-chart-22', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart22.setChartConfig({
tableName: 'Sales2',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.scatter,
config: {
palette: ['#CEB966', '#9CB084', '#6BB1C9', '#6585CF', '#7E6BC9', '#A379BB'],
},
encodings: {
values: [{ field: "Date" }, { field: 'Expenses' }],
category: { field: 'Date' },
color: { field: 'Date' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
majorUnit: {
value: 2,
dateMode: GC.Spread.Sheets.DataCharts.DateMode.year
},
title: "Date"
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
title: "Expenses"
}
]
}]
}
});
const dataChart23 = sheet17.dataCharts.add('data-chart-23', 610, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart23.setChartConfig({
tableName: 'Sales2',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.scatter,
config: {
palette: ['#CEB966', '#9CB084', '#6BB1C9', '#6585CF', '#7E6BC9', '#A379BB'],
},
encodings: {
values: [{ field: "Date" }, { field: 'Expenses' },],
color: { field: 'Date' }
},
}
],
config: {
plotAreas: [{
axes: [
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
majorUnit: {
value: 5,
dateMode: GC.Spread.Sheets.DataCharts.DateMode.month
},
title: "Date"
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
title: "Expenses"
}
]
}]
}
});
function createSales2Table(dataManager) {
const records = [
{
"Country": "US1",
"Company": "Amazon",
"Date": new Date("2022-01-15T03:10:25.000Z"),
"Downloads": 6230,
"Sales": 1,
"Expenses": 3456.45,
"NewCustomer": true,
"Salesman": "Alice"
},
{
"Country": "US2",
"Company": "Google",
"Date": new Date("2022-02-18T06:30:50.000Z"),
"Downloads": 4020,
"Sales": 2,
"Expenses": 2450.75,
"NewCustomer": false,
"Salesman": "Bob"
},
{
"Country": "CHINA",
"Company": "Tencent",
"Date": new Date("2022-03-21T10:15:30.000Z"),
"Downloads": 15470,
"Sales": 3,
"Expenses": 5200.60,
"NewCustomer": true,
"Salesman": "Chen"
},
{
"Country": "UK",
"Company": "BP",
"Date": new Date("2023-04-10T14:45:10.000Z"),
"Downloads": 12470,
"Sales": 4,
"Expenses": 6100.95,
"NewCustomer": false,
"Salesman": "Emily"
},
{
"Country": "GERMANY",
"Company": "Siemens",
"Date": new Date("2023-05-08T08:20:00.000Z"),
"Downloads": 3320,
"Sales": 5,
"Expenses": 2700.30,
"NewCustomer": false,
"Salesman": "Max"
},
{
"Country": "JAPAN",
"Company": "Toyota",
"Date": new Date("2023-06-12T12:35:25.000Z"),
"Downloads": 27500,
"Sales": 6,
"Expenses": 4800.75,
"NewCustomer": true,
"Salesman": "Yuki"
},
{
"Country": "INDIA",
"Company": "TCS",
"Date": new Date("2024-07-19T09:25:15.000Z"),
"Downloads": 18250,
"Sales": 7,
"Expenses": 6200.40,
"NewCustomer": true,
"Salesman": "Ravi"
},
{
"Country": "CANADA",
"Company": "Shopify",
"Date": new Date("2024-08-23T07:15:45.000Z"),
"Downloads": 9500,
"Sales": 8,
"Expenses": 3800.20,
"NewCustomer": false,
"Salesman": "Sophia"
},
{
"Country": "AUSTRALIA",
"Company": "Atlassian",
"Date": new Date("2025-09-30T05:40:35.000Z"),
"Downloads": 14600,
"Sales": 9,
"Expenses": 5100.55,
"NewCustomer": true,
"Salesman": "James"
},
{
"Country": "FRANCE",
"Company": "L'Oreal",
"Date": new Date("2025-10-25T16:50:45.000Z"),
"Downloads": 13750,
"Sales": 10,
"Expenses": 4500.70,
"NewCustomer": false,
"Salesman": "Marie"
}
];
return dataManager.addTable('Sales2', {
data: records
});
}