軸

SpreadJSでは、チャート内の軸と表示単位を設定およびカスタマイズできます。

軸とは

軸は、水平スケール（X軸またはカテゴリ軸）と垂直スケール（Y軸または値軸）でプロット領域の寸法を指します。

軸の種類 通常、基本的な2Dチャートには、第1カテゴリ軸、第1値軸、第2カテゴリ軸、第2値軸の4種類の軸が含まれます。

値軸の表示単位の構成

表示単位は、値軸（第1値軸と第2値軸両方）の場合のみ設定できます。 SpreadJSにて、チャート軸の表示単位を設定するには、次の2つの方法を使用できます。

組み込みの表示単位を設定する - 表示単位を表示する際、定義済みオプションのリスト（なし、百、千、10,000(一万)、100,000(十万)、百万、100,000,000,000(千億)、10,000,000,000(百億)、十億、一兆など）から選択できます。
カスタム表示単位を設定する - 組み込みのオプション以外の有効な数値を指定して、カスタム表示単位を定義できます。また、カスタム表示単位を定義する場合は、負数値やカスタムテキスト（文字列など）はサポートされません。

次の図は、第1値軸に組み込みの表示単位、第2値軸にカスタム表示単位が設定されているチャートを示します。

チャートの軸を取得または設定するには、Chartクラスのaxesメソッドを使用できます。必要に応じて、軸表示単位の追加、変更やカスタマイズが可能です。また、チャートから軸表示単位を削除する場合、軸表示単位の値をnullに設定する必要があります。

サポートされるチャートの種類 - 軸表示単位の構成は、値軸（第1値軸と第2値軸の両方）を含むチャートの全種類でサポートされます。

表示単位ラベルのカスタマイズ

ユーザーは表示単位のラベルを表示・非表示にすることができます。また、フォント、フォント色、およびフォントファミリを設定することにより、表示単位ラベルのデフォルトの外観も変更できます。

メモ： チャートの軸表示単位を構成およびカスタマイズする際、次のような制限があります。
JSONI/Oを実行する時に、DisplayUnitのすべてのプロパティがサポートされます。ただし、ExcelI/Oを実行する時に DisplayUnitのスタイル情報が設定される場合、Excelファイルのxmlに保存されません。したがって、xmlファイルで表示単位ラベルのスタイル設定が失われます。
本機能は、表示単位ラベルのテキストのカスタマイズをサポートしません。

コードの使用

次のコードは、チャートの表示単位とともに軸を設定する方法を示します。

<script>
$(document).ready(function (){
// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });// activesheetを取得します。
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();// チャートのデータを準備します。
activeSheet.setValue(0, 1, "2015年");
activeSheet.setValue(0, 2, "2016年");
activeSheet.setValue(0, 3, "2017年");
activeSheet.setValue(0, 4, "2018年");
activeSheet.setValue(0, 5, "2019年");
activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
activeSheet.setColumnWidth(0, 120);
for (var r = 1; r <= 2; r++) {
for (var c = 1; c <= 5; c++) {
  activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}// 集合縦棒チャートを追加します。
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 500, 400);var series = chart_columnClustered.series();
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "Sheet1!$A$2",
xValues: "Sheet1!$B$1:$F$1",
yValues: "Sheet1!$B$2:$D$2"
});
series.add({
chartType: GC.Spread.Sheets.Charts.ChartType.line,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
name: "Sheet1!$A$3",
xValues: "Sheet1!$B$1:$F$1",
yValues: "Sheet1!$B$3:$D$3"
});var axes = chart_columnClustered.axes();// 第1カテゴリ軸を設定します。
axes.primaryCategory.style.color = 'green';
axes.primaryCategory.title.color = 'green';
axes.primaryCategory.title.text = '第1カテゴリ軸'; // 第1値軸を設定します。
axes.primaryValue.style.color = 'blue';
axes.primaryValue.title.color = 'blue';
axes.primaryValue.title.text = '第1値軸';
axes.primaryValue.title.fontSize = 16; // 「第1値軸」に対して組み込みの表示単位を設定します。
axes.primaryValue.displayUnit = {
unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands,  // 組み込みの表示単位は数千です。
visible: true,
style: {
  color: 'red',
  transparency: 0.1,
  fontFamily: 'arial',
  fontSize: 14
}
};// 第2カテゴリ軸を設定します。
axes.secondaryCategory.visible = true;
axes.secondaryCategory.style.color = 'green';
axes.secondaryCategory.title.color = 'green';
axes.secondaryCategory.title.text = '第2カテゴリ軸';
axes.secondaryCategory.title.fontSize = 16; // 「第2値軸」に対して組み込みの表示単位を設定します。
axes.secondaryValue.displayUnit = {
unit: 500, // カスタム表示単位は500です。
visible: true,
style: {
  color: 'red',
  transparency: 0.1,
  fontFamily: 'Verdana',
  fontSize: 14
}
};// 第2値軸を設定します。
axes.secondaryValue.style.color = 'blue';
axes.secondaryValue.title.color = 'blue';
axes.secondaryValue.format = 'General';
axes.secondaryValue.title.text = '第2値軸';
chart_columnClustered.axes(axes); // チャートのタイトルを設定します。
var title = chart_columnClustered.title();
title.text = "年間売上高";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();
});
</script>

カテゴリ軸で日付の構成

SpreadJSでは、カテゴリー軸を日付（タイムスケール）軸として構成することにより、日付を設定できます。次のさまざまなプロパティを使用して、日数、月数、または年数をカテゴリ軸にプロットできます。

BaseUnit： 日数、月数、年数の基本単位の値を表します。
MajorUnit： 2つの主目盛の間隔を指定する単位を表します。
MajorUnitScale： カテゴリ軸の主単位スケール値を表します。
MinorUnit： 2つの副目盛の間隔を指定する単位を表します。
MinorUnitScale： カテゴリ軸の補助単位スケール値を表します。

基本単位の間隔の差は最小値であり、チャートのサイズで対応できます。ただし、この差は、 MajorUnit プロパティと MinorUnit プロパティを使用して2つの目盛の間隔の単位を指定することでカスタマイズできます。

次の図は、さまざまな日付にて3つのブラウザでサイトの閲覧に費やした平均時間の例を示します。カテゴリ軸は、日付軸として構成されており、月数を基本単位とし、2つの目盛の間隔の単位に「2」を指定しています。

メモ：
日付軸では時間、分、秒がサポートされていません。
minorUnitScaleの値がmajorUnitScaleより大きい場合は、minorUnitScaleの値が反映されません。

コードの使用

// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// アクティブシートを取得します。
var activeSheet = spread.getActiveSheet();
// 配列数式を作成します。
var dataArray = [
    ["", new Date(2019, 1, 1), new Date(2019, 2, 1), new Date(2019, 3, 1), new Date(2019, 4, 1), new Date(2019, 5, 1), new Date(2019, 6, 1)],
    ["Chrome", 5.782, 6.263, 7.766, 8.389, 9.830, 11.260],
    ["FireFox", 4.284, 4.130, 3.951, 3.760, 3.631, 3.504],
    ["IE", 2.814, 2.491, 2.455, 1.652, 1.073, 0.834],
];
// 列幅を設定します。
for (var i = 0; i < 8; i++) {
    activeSheet.setColumnWidth(i, 80.0, GC.Spread.Sheets.SheetArea.viewport);
}
// 配列を設定します。
activeSheet.setArray(0, 0, dataArray);
// 範囲に日付書式を設定します。
activeSheet.getRange(0, 0, 1, 7).formatter("yyyy/m/d");
// チャートを追加します。
var chart = activeSheet.charts.add('ChartWithDateAxis', GC.Spread.Sheets.Charts.ChartType.line, 2, 85, 400, 400, 'A1:G4');
// チャートのタイトルを設定します。
chart.title({ text: "日付軸付きのチャート" });
// 軸のプロパティを設定します。
var axes = chart.axes();

// DateAxisとしてprimaryCategoryのプロパティを設定します。
axes.primaryCategory.baseUnit = GC.Spread.Sheets.Charts.TimeUnit.months;
axes.primaryCategory.majorUnit = 2;
// axes.primaryCategory.minorUnit = 1;
axes.primaryCategory.majorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.months;
//   axes.primaryCategory.minorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.days;
chart.axes(axes);
});

交差軸の設定

Excelと同様に、横軸の交差値をカスタマイズしてチャートの外観を変更できます。交差軸は、データ点が正の値と負の値の両方の間にある場合にデータを表すのに役立ちます。これをサポートするために、AxisCrossPoint列挙体には次の3つのオプションが提供されています。

automatic ：軸が交差する点を設定します。
maximum ：軸の交差を最大値に設定します。
minimum ：軸の交差を最小値に設定します。

primaryCategoryおよびprimaryValueクラスの crossPoint プロパティを使用して、交差する位置を調整できます。

次は、チャートの交差軸を設定する方法を示します。たとえば、ユーザーは2012年の前後に成長率が2％を上回ったり下回ったりする利益額を評価したいとします。会社の成長と利益を表すために、バブルチャートを使用して、特定の年に発生した成長と利益を表示します。バブルにカーソルを合わせているときに表示されるデータラベルは、特定の年の成長率と利益額を表示します。

成長率が2％を上回ったり下回ったりする利益額を分析するために、primaryCategory（Y軸）のcrossPoint値を2012に設定し、primaryValue（またはX軸）のcrossPointを2に設定します。このcrossPointを使用して、チャートの4つの象限ですべての「成長」と「利益額」を簡単に分離して理解できます。チャートの左上と左下の象限を使用して、成長率が2％を上回ったり下回ったりする2012年より前の年の利益額を分析できます。同様に、チャートの右上と右下の象限を使用して、成長率が2％を上回ったり下回ったりする2012年以降の利益額を明確に評価できます。

Image depicting bubble chart with cross axis.

コードの使用

次のサンプルコードは、チャートで交差軸を設定する方法を示します。

<script>
$(document).ready(function () {
// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// シートを取得します。
var sheet = spread.getSheet(0);
sheet.suspendPaint();
// 列幅を設定します。
sheet.setColumnWidth(0, 80);
sheet.setColumnWidth(1, 90);
sheet.setColumnWidth(2, 110);
// データ配列を作成します。
var dataArray = [
["年", "成長率（％）", "利益額（円）"],
[2000, 4, 3123123],
[2001, -2, 4123123],
[2002, 1, 8456456],
[2003, 3, 2345435],
[2004, 7, 1768678],
[2005, 5, 5453456],
[2006, 5, 6676878],
[2007, -4, 7434234],
[2008, 3, 3834234],
[2009, 2, 6756756],
[2010, 5, 5672123],
[2011, 9, 9743546],
[2012, 6, 3464513],
[2013, 4, 7431545],
[2014, 7, 7456456],
[2015, -1, 4567687],
[2016, 6, 4870231],
[2017, 3, 4353453],
[2018, 7, 3459021],
[2019, 8, 2390123],
[2020, 5, 2302303],
];
// データ配列を設定します。
sheet.setArray(0, 0, dataArray);
// チャートを追加します。
var chart = sheet.charts.add('BubbleChart1', GC.Spread.Sheets.Charts.ChartType.bubble, 320, 30, 620, 400, "A2:C22");
// チャートからグリッド線を非表示にします。
var gridLinesAxes = chart.axes();
gridLinesAxes.primaryCategory.majorGridLine.visible = false;
gridLinesAxes.primaryValue.majorGridLine.visible = false;
chart.axes(gridLinesAxes);
// 系列を取得し、背景色をパターンで設定します。
var series = chart.series().get();
var seriesItem = series[0];
seriesItem.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40,
foregroundColor: "blue",
backgroundColor: "lime",
}
chart.series().set(0, seriesItem);
// ChartAreaを構成します。
var chartArea = chart.chartArea();
chartArea.backColor = "#FDF2E9";
chartArea.fontSize = 16;
// ChartAreaの境界線のスタイルを設定します。
chartArea.border.width = 3;
chartArea.border.color = "darkblue";
chart.chartArea(chartArea);
// チャートのタイトルを設定します。
var title = chart.title();
title.fontSize = "22.00";
title.text = "JSR株式会社の成長と利益";
chart.title(title);
// チャートの凡例を非表示にします。
var legend = chart.legend();
legend.visible = false;
chart.legend(legend);
// x＆y軸にcrossPointを設定します。
var axes = chart.axes();
axes.primaryCategory.crossPoint = 2012; // y軸
axes.primaryValue.crossPoint = 2; // x軸
chart.axes(axes);
// セルのスタイルを設定します。
var style = new GC.Spread.Sheets.Style();
style.font = "bold 12px Arial";
style.foreColor = "white";
style.backColor = "#5B9BD5";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < 3; i++)
sheet.setStyle(0, i, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.resumePaint();
});
</script>

メモ： 交差軸は、日付軸では一時的にサポートされていません。

軸の方向の設定

SpreadJSでは、チャートの軸の向きを制御し、反転することができます。次の図は、主軸のデフォルト軸と反転した軸を示しています。

orientation プロパティを「0」に設定すると、軸をデフォルトの方向に表示でき、また「1」に設定すると、反転して表示できます。あるいは、 AxisOrientation 列挙型を minMax または maxMin に設定して軸をデフォルトの方向または反転して表示できます。

コードの使用

このサンプルコードは、チャートの軸のデフォルト表示および反転にする方法を示しています。

var axesMin = minMaxChart.axes();
axesMin.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.minMax
    // または 
    //方向　: 0
};
minMaxChart.axes(axesMin);

var axesMax = maxMinChart.axes();
axesMax.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin
    // または 
    //方向　: 1
};
maxMinChart.axes(axesMax);

制限事項

円チャート、サンバーストチャート、ツリーマップチャート、およびファンネルチャートを使用する場合は、軸の方向を変更することができません。

軸ラベル位置の設定

チャート内の軸データラベルの位置を設定するには、 tickLabelPosition プロパティを使用します。 TickLabelPosition 列挙体を使用して、データラベルを次の位置に指定できます。

highまたは0：チャートの上部または右側
lowまたは1：チャートの下部または左側
nextToAxisまたは2: 軸の横（軸がチャートの両辺上にない場合）。これはデフォルト値です。
noneまたは3: 目盛なし。

次の図は、主軸のデータラベルのデフォルトの位置および「high」の位置を示しています。

次のサンプルコードは、チャート軸のデータラベルのデフォルト位置および上部位置を設定します。

// チャート軸のプロパティを設定します。
var axesTickDefault = chart.axes();
// tickLabelPositionをデフォルトのnextToAxisに設定します。
axesTickDefault.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.nextToAxis;
// または
// axesTickDefault.primaryCategory.tickLabelPosition = 2;
chart.axes(axesTickDefault);

var axesTickHigh = chart.axes();
// tickLabelPositionをHighに設定します。
axesTickHigh.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.high;
// または
// axesTickDefault.primaryCategory.tickLabelPosition = 0;
chart.axes(axesTickHigh);

軸ラベルの間隔の設定

軸ラベルの間隔単位は、連続するラベルの間隔を制御します。この機能を使用すると、ラベルの密度を調整し、ラベルの過密や重なりを回避してデータを明確に表示するために、ラベルの間隔を適切に調整できます。

Excelの機能と同様に、間隔の単位を既定値またはカスタム値に設定できます。GC.Spread.Sheets.Charts.IAxisインターフェイスの tickLabelSpacing プロパティを使用すると、軸ラベルのカスタム間隔単位を作成できます。tickLabelSpacing プロパティのデフォルト値は 1 で、チャート内のすべてのラベルが表示されます。

下の画像は、第1カテゴリ軸のデフォルトのラベルと間隔を空けたラベルを示しています。

Single level axis label intervals_en

次のサンプルコードは、チャートフ内の第1カテゴリ軸のラベル間隔を設定します。

// 軸ラベルの間隔を設定します。
var dataArray = [
['Manufacturer', 'Kia', 'Hyundai', 'Toyota', 'Nissan', 'Honda', 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Renault'],
['Sales', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 450, 100, 400, 400, "A1:K2");
let axesTemp = chart.axes();
axesTemp.primaryCategory.tickLabelSpacing = 2;
chart.axes(axesTemp);

さらに、複数レベルの軸ラベルを持つグラフの場合、最後のレベルのカテゴリフィールドにバインドされたリーフノードに tickLabelSpacing プロパティが適用されます。リーフノードは、ツリー構造の最後のノードを指します。

親レベルの軸ラベルの表示は、子ラベルの最初の軸ラベルの状態によって異なります。

最初の軸ラベルが表示されると、その親の軸ラベルも表示されます。
最初の軸ラベルが非表示になっている場合は、その親の軸ラベルも非表示になります。

下の画像は、複数レベルの軸ラベルのデフォルトのラベルと間隔を空けたラベルを示しています。

Multi level axis label intervals_en

次のサンプルコードは、チャート内の複数レベルの軸ラベルの間隔を設定します。

// 複数レベルの軸ラベルの間隔を設定します。
var dataArray = [
['Country', 'Korea', 'Japan', 'Germany', 'France'],
['Manufacturer', 'Kia', 'Hyundai', 'Toyota', 'Nissan', 'Honda', 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Renault'],
['Sales', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 150, 100, 400, 400, "B1:K3");
let axesTemp = chart.axes();
axesTemp.primaryCategory.tickLabelSpacing = 3;
chart.axes(axesTemp);

制限事項

日付軸または数値軸を含むチャートの tickLabelSpacing プロパティの設定はサポートされていません。
tickLabelSpacing プロパティは、サンバースト、ツリーマップ、ウォーターフォール、ファンネル、レーダーチャートではサポートされていません。
tickLabelSpacing プロパティが未設定で、チャートのサイズが小さく変更されると、Excel はラベル間隔を自動的に調整します。しかしながら、SpreadJS は現在このポリシーをサポートしていません。