軸
軸とは、表示されるデータのスケールや次元を理解するのに役立つチャート上の線を指します。水平軸 (x 軸) と垂直軸 (y 軸) は、時間、数量、パーセンテージなどのデータをプロットするために使用されます。IAxisOptionインターフェースを使用して、データチャートの軸の外観と動作を定義します。
軸のプロパティ
IAxisOption インターフェースで設定可能な軸のプロパティは以下の通りです。
プロパティ | 説明 | サンプルプレビュー |
|---|---|---|
type | 軸の種類を「カテゴリ軸」または「値軸」として定義します。 チャートの種類や座標系（例：直交座標系または極座標系）に基づいて動作が異なる場合があります |
|
labels | 軸ラベルの表示を制御します。 デフォルトの動作はチャートの種類によって異なる場合があります。 デフォルトを上書きするには明示的な設定が必要です。 |
|
axisLine | 軸の線が表示されるかどうかを決めます。 データチャートは、さまざまなチャートタイプに対して異なるデフォルト値を提供します。 デフォルトを上書きするには明示的な設定が必要です。 |
|
reversed | 軸の方向を反転させます。 |
|
title | 単位やその他の説明など、軸のタイトルを指定します。 |
|
max & min | 軸範囲の最大値と最小値を設定します。 |
|
position | データチャート上の軸の位置を決定します。 |
|
format | データ単位や書式文字列など、軸の書式情報を設定します。 |
|
majorUnit & minorUnit | スケールの目盛りの間隔を設定します。
|
|
labelAngle | 軸ラベルの回転角度を設定します (範囲: -90 ～ 90 度)。 現在、このプロパティは配列の最初の要素に対してのみ機能することに注意してください。 |
|
labelStyle | 軸ラベルのテキストタイルを定義します。 |
|
titleStyle | 軸タイトルのスタイルを指定します。 |
|
lineStyle | 軸線の種類を設定します。 |
|
majorTickSize & minorTickSize | 現在の軸の主要目盛りと副目盛りの長さを設定します。 主要目盛りと副目盛りは、軸上のデータポイントの位置を特定するのに役立ちます。
サポートされている値：なし、内側、外側、交差 |
|
majorGrid & minorGrid | データの解釈を強化するために設定します。通常、より細かい数値間隔が示されるため、ユーザーはデータをより正確に表示できます。 デフォルト値はチャートの種類によって異なる場合があります。例えば、円グラフではデフォルトでグリッド線は表示されません。
主要グリッド線と目盛りは各主要単位ごとに描かれます。副グリッド線と目盛りは各副単位ごとに描かれます。デフォルトでは、各主要単位は1つの副グリッド線と目盛りで区切られます。 |
|
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" //文字列
}, {
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 //ブール値
},
]
}]
}
});
// 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: false //ブール値
},
]
}]
}
});
//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 //ブール値
},
]
}]
}
});
//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)" //文字列
},
]
}]
}
});
//6.最大値と最小値
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 //数値
},
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軸を配置すると、データセットはｘ軸のスケールに揃えます。
//ただし、ｘ軸は数値以外のカテゴリを表すことが多いため、カテゴリの数に基づいて均等に分割されます。
//スケールは、開始項目の位置が 1 で、各項目間の間隔が 1 単位になるように設定されます。
origin: 2.3, //Y軸の原点を設定します。
}]
}]
}
});
// 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.主要単位と副単位
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,
//現在のスケールが数値型の場合は、値を直接設定します。
majorUnit: {
value: 1000
},
},
{
type: GC.Spread.Sheets.DataCharts.AxisType.x,
// スケールが数値または日付型でない場合は、値を直接設定します。
// 各カテゴリ値が 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軸のタイトルスタイルを設定します。
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. 主要目盛りサイズと副目盛りサイズ
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. 主要グリッドと副グリッド
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, //ブール値
minorGrid: true, //ブール値
}]
}]
}
});
// 16.主要グリッド線スタイルと副グリッド線スタイル
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
});
}