차트 축
축(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 | 산점도 및 버블 차트와 같은 데이터 차트에서 축의 시간 간격을 설정합니다. |
|
코드 사용 예시
다음 샘플 코드를 참조하여 데이터 차트에서 축을 구성하고 사용자 정의할 수 있습니다.
이 샘플은 "데이터 차트 생성하기" 페이지에서 언급된 "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
});
}