データラベル

データラベルは、データポイントに関する追加情報をチャート上に直接表示します。データラベルを追加、書式設定、カスタマイズして、特定のユーザー要件を満たすことができます。

GC.Spread.Sheets.DataCharts名前空間のIPlotConfigTextOptionインターフェースを使用して、データチャートのデータラベルを構成および管理します。このインターフェースは、テンプレート、テキストスタイル、オフセット、接続線スタイルなど、ラベルの外観と動作をカスタマイズするためのプロパティを提供します。さらに、OverlappingLabelsおよびTextPosition列挙体を使用して、重なり合うラベルの表示とラベルのテキスト位置を管理できます。

Data label template

プロパティ

次のリストは、IPlotConfigTextOptionインターフェースの主要なプロパティを示しています。

プロパティ	説明
template	データラベルの構造をカスタマイズします。
format	データラベル値のフォーマットをカスタマイズします。
style	データラベルの外観とスタイルをカスタマイズします。たとえば、fill、fillOpacity、stroke、strokeWidth、strokeDasharray、strokeOpacity など。
textStyle	データラベル内のテキストスタイルをカスタマイズします。たとえば、fontSize、fontWeight、fontFamily、color、fontStyle、overflow など。
maxWidth	データラベルの最大幅を設定します。データラベルのテキストが最大幅を超える場合、テキストはtextStyle.overflow設定に従って表示されます。
offset	元のデータラベル位置からのオフセットを調整します。
overlappingLabels	重なり合うデータラベルの表示を制御します。
position	データポイントに対するデータラベルの位置を指定します。
connectingLineStyle	データポイントとデータラベルの間の接続線のスタイルをカスタマイズします。たとえば、stroke、strokeWidth、strokeDasharrayなど。接続線スタイルを設定する場合、次の点に注意してください：接続線を表示するには、strokeWidthの値が0より大きくなければなりません。円チャートのラベル接続を調整するには、firstLineLengthおよびsecondLineLengthを使用します。

コードの使用

次のサンプルコードを参照して、データチャートのデータラベルを構成およびカスタマイズします。

このサンプルは、データチャートの作成ページで記載されているsalesTableデータを使用しています。したがって、そのページに記載されている主要な手順に従ってデータチャートの設定を完了してください。完了したら、次のコードを使用してデータラベルを構成できます。さらに、特定のニーズに応じてデータソースをカスタマイズする柔軟性もあります。

// 1.データラベルテンプレート
const sheet = spread.getSheet(0);
sheet.name("Template");
sheet.setValue(23, 0, "Template Applied: '{colorField.name}: {colorField.value}\n{valueField.name}: {valueField.value}'");

const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 800, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     //データラベルにテンプレートを設定します。
                     template: '{colorField.name}: {colorField.value}\n{valueField.name}: {valueField.value}', //文字列
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside, // GC.Spread.Sheets.DataCharts.TextPosition
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

// 2. 書式
const sheet2 = spread.getSheet(1);
sheet2.name("Format");
sheet2.setValue(23, 0, "Template Applied: '{colorField.value}\n{valueField.value}'");
sheet2.setValue(24, 0, "Format Applied: '$0'");

const dataChart2 = sheet2.dataCharts.add('data-chart-2', 10, 10, 800, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     // データラベルに書式を適用します。
                     format: { value: '$0' }, //文字列
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

// 3.スタイル
const sheet3 = spread.getSheet(2);
sheet3.name("Style");
sheet3.setValue(23, 0, "Template Applied: '{colorField.value}\n{valueField.value}'");
sheet3.setValue(24, 0, "Style has been applied to Data Label");

const dataChart3 = sheet3.dataCharts.add('data-chart-3', 10, 10, 800, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     // styleプロパティを使用してデータラベルのスタイルをカスタマイズします。
                     style: {         // GC.Spread.Sheets.DataCharts.IStyleOption
                         fill: { type: 'CssColor', color: 'rgb(255, 255, 255)' },
                         fillOpacity: 0,
                         stroke: { type: 'CssColor', color: "red" },
                         strokeOpacity: 0.5,
                         strokeWidth: 2,
                         strokeDasharray: '5,5'
                     },
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

// 4.テキストスタイル
const sheet4 = spread.getSheet(3);
sheet4.name("Text Style");
sheet4.setValue(23, 0, "Template Applied: '{colorField.value}\n{valueField.value}'");
sheet4.setValue(24, 0, "Style has been applied to Data Label");

const dataChart4 = sheet4.dataCharts.add('data-chart-4', 10, 10, 800, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart4.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     //TextStyleプロパティを使用してデータラベルのテキストスタイルをカスタマイズします。
                     textStyle: {       // GC.Spread.Sheets.DataCharts.ITextStyleOption
                         fontFamily: 'Calibri',
                         fontSize: 14,
                         fontWeight: 'Lighter',
                         fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                         color: 'rgba(51, 51, 51, 1)',
                         overflow: GC.Spread.Sheets.DataCharts.TextOverflow.ellipsis
                     },
                     maxWidth: 60,
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
 });

// 5.最大幅
const sheet5 = spread.getSheet(4);
sheet5.name("Max Width");
sheet5.setValue(16, 0, "Max Width: 40");
sheet5.setValue(17, 0, "Text Style Overflow: Wrap");

const dataChart5 = sheet5.dataCharts.add('data-chart-5', 10, 10, 400, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart5.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     //maxWidthプロパティを使用してデータラベルの最大幅をカスタマイズします。
                     maxWidth: 40,  //数値
                     //データラベルのテキスト幅が最大幅を超える場合、テキストはtextStyle.overflowの設定に従って表示されます。
                     textStyle: {
                         overflow: GC.Spread.Sheets.DataCharts.TextOverflow.wrap
                     },
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

// 6.接続線のスタイル
const sheet6 = spread.getSheet(5);
sheet6.name("Connecting Line Style");
sheet6.setValue(19, 0, "Connecting Line Style- StrokeWidth: 1");
sheet6.setValue(20, 0, "Connecting Line Style- StrokeDashArray: 5,5");

sheet6.setValue(19, 10, "Connecting Line Style- StrokeWidth: 1");
sheet6.setValue(20, 10, "Connecting Line Style- StrokeDashArray: 5,5");
sheet6.setValue(21, 10, "Connecting Line Style- firstLineLength: 20");
sheet6.setValue(22, 10, "Connecting Line Style- secondLineLength: 20");

const dataChart6 = sheet6.dataCharts.add('data-chart-6', 10, 10, 500, 350, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart6.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     offset: 20,
                     //connectingLineStyleプロパティを使用して、データラベルの接続線のスタイルをカスタマイズします。
                     connectingLineStyle: {
                         strokeWidth: 1, //線の幅を設定します。デフォルト値は0です。接続線を表示するには、このプロパティを0より大きい値に設定します。
                         strokeDasharray: '5,5', //線のダッシュパターンを定義します。破線にするには、このプロパティを'5,5'などの値に設定します。
                     }
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

const dataChart7 = sheet6.dataCharts.add('data-chart-7', 600, 10, 600, 350, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart7.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.pie,
             config: {
                 text: [{
                     template: '{colorField.value},{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     connectingLineStyle: {
                         strokeWidth: 1, //線の幅を設定します。デフォルト値は0です。接続線を表示するには、このプロパティを0より大きい値に設定します。
                         strokeDasharray: '5,5', //線のダッシュパターンを定義します。破線にするには、このプロパティを'5,5'などの値に設定します。
                         firstLineLength: 20, // 接続線の最初のセグメントの長さを決めます（データポイントに最も近い部分）。このプロパティは円グラフシリーズにのみ適用されます。他のチャートタイプには、代わりにoffsetプロパティを使用します。
                         secondLineLength: 20, //接続線の2番目のセグメントの長さを指定します（データラベルテキストに最も近い部分）。このプロパティも円グラフシリーズにのみ適用されます。他のチャートタイプには、代わりにoffsetプロパティを使用します。
                     }
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Product' },
             }
         }
     ]
});

// 7.オフセット
const sheet7 = spread.getSheet(6);
sheet7.name("Offset");
sheet7.setValue(19, 0, "Offset 40 is applied to the Data Label");

const dataChart8 = sheet7.dataCharts.add('data-chart-8', 10, 10, 500, 350, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart8.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.column,
             config: {
                 text: [{
                     template: '{colorField.value}\n{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     //offsetプロパティを使用して、データラベルの位置を元の位置に対して調整します。
                     offset: 40, //数値
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 category: { field: 'Product' },
                 color: { field: 'Product' },
             }
         }
     ]
});

// 8.重なり合うラベル
const sheet8 = spread.getSheet(7);
sheet8.name("Overlapping Labels");
sheet8.setValue(8, 0, "Overlapping Labels: Show");
sheet8.setValue(24, 0, "Overlapping Labels: Hide");

const dataChart9 = sheet8.dataCharts.add('data-chart-9', 300, 10, 600, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart9.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.pie,
             config: {
                 text: [{
                     template: '{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     //overlappingLabelsプロパティを使用して、重なり合うデータラベルの表示を制御します。
                     overlappingLabels: GC.Spread.Sheets.DataCharts.OverlappingLabels.show,
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Sales' },
             }
         }
     ]
});

const dataChart10 = sheet8.dataCharts.add('data-chart-10', 300, 330, 600, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart10.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.pie,
             config: {
                 text: [{
                     template: '{valueField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,
                     overlappingLabels: GC.Spread.Sheets.DataCharts.OverlappingLabels.hide,  //非表示
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Sales' },
             }
         }
     ]
 });

// 9.位置
const sheet9 = spread.getSheet(8);
sheet9.name("Position");
sheet9.setColumnCount(25);
sheet9.setValue(13, 0, "Position: Outside");
sheet9.setValue(13, 11, "Position: Inside");
sheet9.setValue(30, 0, "Position: Center");

const dataChart11 = sheet9.dataCharts.add('data-chart-11', 10, 10, 600, 250, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart11.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.donut,
             config: {
                 text: [{
                     template: '{colorField.value}',
                     //positionプロパティを使用して、データ ポイントに対するデータラベルの配置を定義します。
                     position: GC.Spread.Sheets.DataCharts.TextPosition.outside,  //外部
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Salesman' },
             }
         }
     ]
});

const dataChart12 = sheet9.dataCharts.add('data-chart-12', 650, 10, 600, 250, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart12.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.donut,
             config: {
                 text: [{
                     template: '{colorField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.inside, //内部
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Salesman' },
             }
         }
     ]
});

const dataChart13 = sheet9.dataCharts.add('data-chart-13', 10, 350, 600, 250, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart13.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.donut,
             config: {
                 text: [{
                     template: '{colorField.value}',
                     position: GC.Spread.Sheets.DataCharts.TextPosition.center, //中央
                 }]
             },
             encodings: {
                 values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                 color: { field: 'Salesman' },
             }
         }
     ]
});