データラベル

データラベルは、データ系列を構成する各データポイントの詳細を表します。データラベルを付けることで、チャートにプロットされている情報が、より明確に理解および解釈されるようになります。

Spread.Sheetsでは、データラベルを取得または設定できます。また、データラベルの位置や色の変更、チャートでのデータラベルの表示／非表示の切り替えを行えます。このようなデータラベルの操作には、dataLabelsメソッドおよびDataLabelPosition列挙体を使用します。

次の図は、データラベルを設定した基本的なチャートを示します。

コードの使用

次のコードは、チャートのデータラベルを設定する方法を示します。

// データラベルを設定します。
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.color = "#000000";
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;

// 位置にはいくつかのオプションがあります。チャートの種類ごとに、有効な位置値も変わります。

dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);

背景色とその透明度、または境界線の色、幅、透明度などを設定することで、データラベルをカスタマイズすることができます。また、次の図に示すように、チャートの系列に対して様々なスタイルを設定できます。

Data labels in a chart

コードの使用

次のサンプルコードは、さまざまなチャートの系列に対してデータラベルのスタイルを設定する方法を示します。

// 系列0および系列1を取得し、そのプロパティを設定します。
for (var i = 0; i < 2; i++) {
    var series = chart.series().get(i);
    series.dataLabels = {
        showValue: false,
        showSeriesName: true,
        showCategoryName: false,
        showPercentage: false,
        separator: ",",
        position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
        format: "#,##0;-#,##0",
        color: "white",
        backColor: "red",
        borderColor: "blue",
        borderWidth: 2
    };
    chart.series().set(i, series);
}

// 系列2を取得し、そのプロパティを設定します。
var series = chart.series().get(2);
series.dataLabels = {
    showValue: false,
    showSeriesName: true,
    showCategoryName: false,
    showPercentage: true,
    separator: ",",
    position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
    format: "#,##0;-#,##0",
    color: "white",
    backColor: "skyblue",
    borderColor: "green",
    borderWidth: 2
};
chart.series().set(2, series);

セル範囲をデータラベルとして表示

Excel の機能と同様に、データラベルにセル参照を設定し、選択したセル範囲の値をチャートのデータラベルとして表示できます。

メモ：データラベル内のセル範囲参照は、単一の行または列の範囲をサポートします。
単一行の場合、データラベルには各セルのテキストが左から右の順に表示されます。
単一列の場合、データラベルにはテキストが上から下の順に表示されます。

データラベルでセル参照を利用するには、IDataLabels インターフェイスの dataLabelsRange プロパティを使用します。このプロパティは静的な値配列をサポートします。参照先のセル範囲を変更すると、チャートが更新され、それに応じてデータラベルが更新されます。

コードの使用

次のサンプルコードは、B4 ～ D4 セルの値をデータラベルとして表示する方法を示しています。

 // セル参照を設定して、チャートにデータラベルを表示します。
 let series = chart.series().get(0);
 series.dataLabels.showDataLabelsRange = true;
 series.dataLabels.dataLabelsRange = "Sheet1!$B$4:$D$4";
 chart.series().set(0, series);

SpreadJSデザイナの使用

セル範囲をデータラベルとして表示するには、次の手順に従います。

データシリーズ、チャート、またはデータラベルを右クリックしてコンテキストメニューを開きます。
利用可能なフォーマットオプションを選択します。
ドロップダウンから「ラベルオプション」を選択します。
すべてのラベルオプションは、[データラベルの書式設定] の下に表示されます。
[ラベルの内容] の下で、[セルからの値] チェックボックスをオンにし、[範囲の選択...] をクリックします。
[データラベルの範囲] ダイアログボックスが表示されたら、ワークシートでデータラベルとして表示するセル値の範囲を選択します。
選択すると、「データラベル範囲」ダイアログボックスに選択した範囲が表示されます。
[OK]をクリックします。
セルの値がチャートのデータラベルとして表示されます。これらのセルの値が変更されると、チャートのラベルが自動的に更新されます。

ValuesFromCell_en

制限事項

セル範囲参照は複数の行と列の範囲をサポートしません。
単一のデータポイントに対するデータラベルについては、 ShowDatalabelsRange プロパティの設定はサポートされていません。
dataLabelsRange プロパティは、参照セルのカスタム名をサポートしていません。