凡例

データチャートの凡例は、各線、棒、その他のデータをさまざまな色やサイズに関連付けることで、ユーザーがそれらのデータの意味を理解するのに役立つ視覚的な補助機能です。

ILegendOptionsインターフェースを使用して、データチャートの凡例の外観と動作を定義します。これには、タイトル、タイプ、位置、テキストスタイルなどのプロパティが含まれます。さらに、LegendType列挙体を使用して、色やサイズなどの凡例の種類を指定し、LegendPosition列挙体を使用して、データチャート内の凡例の位置を定義します。

凡例に表示されるシンボルの種類は、データチャートの種類によって異なります。

四角形: 棒チャート、面チャート、サンバーストチャート、円チャート、ドーナツチャート、範囲チャートに使用されます。
線: シンボルのない折れ線チャートに使用されます。
円: シンボルのあるXY散布図、バブルチャート、面チャートに使用されます。
円付き線: シンボルのある折れ線チャートに使用されます。

プロパティ

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

プロパティ	説明	サンプルプレビュー
type	すべての種類のチャートに適用可能な、明確な色でデータを表します。チャートのエンコーディングでフィールドが凡例にバインドされている場合、色の凡例が自動的に表示されます。
type	異なるシンボルサイズを通じてデータを表現し、通常はバブルチャートで使用されます。サイズの凡例はデフォルトでは表示されず、明示的な設定が必要です。
title	凡例に説明的なタイトルを追加し、凡例に表示される内容の意味や次元を説明します。
position	チャート内の凡例の表示位置を決定します。利用可能なオプションは、None（デフォルト）、Top、Bottom、Left、および Right です。
textStyle	凡例エリア内のテキストの外観を定義します。
height & width	凡例の寸法を、データチャート全体のパーセンテージとして0～1の範囲で設定します。
hAlign	凡例の水平配置（hAlign）を Left、Center（デフォルト）、または Right に設定します。
vAlign	凡例の垂直配置（vAlign）を Top、Middle（デフォルト）、または Bottom に設定します。
padding	凡例内の余白を調整します。デフォルトの余白は { top: 10, bottom: 10, left: 10, right: 10 } です。

コードの使用

次のコードサンプルは、データチャートの凡例を構成する方法を示しています。

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

// 1.タイプ
const sheet = spread.getSheet(0);
sheet.setColumnCount(30);
sheet.name("Type");
sheet.setValue(7, 0, "Color Legend");
sheet.setValue(28, 0, "The size legend will not be displayed by default");
sheet.setValue(28, 10, "If you want to display the “size” legend, you need to set the position of the legend.");
// sheet.setValue(23, 0, "Polar coordinate system");
const dataChart = sheet.dataCharts.add('data-chart', 100, 10, 400, 250, 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: 'Salesman' },
                 color: { field: 'Salesman' },
             },
         }
     ],
});


const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 300, 400, 259, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.bubble,
             encodings: {
                 values: [
                     { field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
                     { field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }
                 ],
                 size: { field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
             },
         }
     ],
});

const dataChart3 = sheet.dataCharts.add('data-chart-3', 620, 300, 400, 259, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
     tableName: 'Sales',
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.bubble,
             encodings: {
                 values: [
                     { field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
                     { field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }
                 ],
                 size: { field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
             },
         }
     ],
     config: {
         plotAreas: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.size,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right
             }]
         }]
     }
});

// 2.タイトル
let sheet2 = spread.getSheet(1);
sheet2.name("Title");
sheet2.setValue(16, 0, "The Legend has title 'Product Category'");
const dataChart4 = sheet2.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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 title: "Product Category",
             }]
         }]
     }
});


// 3.位置
let sheet3 = spread.getSheet(2);
sheet3.name("Position");
sheet3.setValue(13, 0, "Legend Position: Right");
sheet3.setValue(30, 0, "Legend Position: Top");
sheet3.setValue(13, 9, "Legend Position: Left");
sheet3.setValue(30, 9, "Legend Position: Bottom");

const dataChart5 = sheet3.dataCharts.add('data-chart-5', 10, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,  //右
             }]
         }]
     }
});
const dataChart6 = sheet3.dataCharts.add('data-chart-6', 550, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.left, //左
             }]
         }]
     }
});
const dataChart7 = sheet3.dataCharts.add('data-chart-7', 10, 350, 400, 250, 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' }
             },
         }
     ],
     config: {
         plotAreas: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.top,   //上
             }]
         }]
     }
});
const dataChart8 = sheet3.dataCharts.add('data-chart-8', 550, 350, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,  //下
             }]
         }]
     }
});

// 4.テキストスタイル
let sheet4 = spread.getSheet(3);
sheet4.name("Text Style");
sheet4.setValue(17, 0, "Legend Text Style has been changed");

const dataChart9 = sheet4.dataCharts.add('data-chart-9', 10, 10, 450, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 textStyle: {
                     color: "#483f3f",
                     fontFamily: "Century",
                     fontSize: 14,
                     fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                     fontWeight: "Bold"
                 }
             }]
         }]
     }
});

// 5.高さと幅
let sheet5 = spread.getSheet(4);
sheet5.name("Height and Width");
sheet5.setValue(16, 0, "Height of the Legend: 0.5");
sheet5.setValue(16, 10, "Width of the Legend: 0.4");

const dataChart10 = sheet5.dataCharts.add('data-chart-10', 10, 10, 450, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,
                 //凡例の高さをテータチャート全体のパーセンテージとして設定します。
                 height: 0.5, // 値の範囲は 0~1 です。
             }]
         }]
     }
});

const dataChart11 = sheet5.dataCharts.add('data-chart-11', 600, 10, 450, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 //凡例の幅をデータチャート全体のパーセンテージとして設定します。
                 width: 0.4, //値の範囲は 0~1 です。
             }]
         }]
     }
});

 // 6.水平配置
 let sheet6 = spread.getSheet(5);
 sheet6.name("hAlign");
 sheet6.setValue(13, 0, "Horizonal Alignment: Left");
 sheet6.setValue(30, 0, "Horizonal Alignment: Center  (Default Value)");
 sheet6.setValue(13, 9, "Horizonal Alignment: Right");

 const dataChart12 = sheet6.dataCharts.add('data-chart-12', 10, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,
                 padding: {
                     left: 30,
                 },
                 //水平方向の位置を設定します。
                 hAlign: GC.Spread.Sheets.DataCharts.HAlign.left   //左
             }]
         }]
     }
 });

 const dataChart13 = sheet6.dataCharts.add('data-chart-13', 10, 350, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,
                 padding: {
                     left: 30,
                 },
                 //水平方向の位置を設定します。
                 hAlign: GC.Spread.Sheets.DataCharts.HAlign.center   //中央 (デフォルト)
             }]
         }]
     }
 });

 const dataChart14 = sheet6.dataCharts.add('data-chart-14', 550, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.bottom,
                 padding: {
                     left: 30,
                 },
                 //垂直方向の位置を設定します。
                 hAlign: GC.Spread.Sheets.DataCharts.HAlign.right   //右
         }]
     }
 });

 // 7. 垂直配置
 let sheet7 = spread.getSheet(6);
 sheet7.name("vAlign");
 sheet7.setValue(13, 0, "Vertical Alignment: Top");
 sheet7.setValue(30, 0, "Vertical Alignment: Center  (Default Value)");
 sheet7.setValue(13, 9, "Vertical Alignment: Bottom");

 const dataChart15 = sheet7.dataCharts.add('data-chart-15', 10, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 padding: {
                     left: 30,
                 },
                 //垂直方向の位置を設定します。
                 vAlign: GC.Spread.Sheets.DataCharts.VAlign.top   //上
             }]
         }]
     }
 });

 const dataChart16 = sheet7.dataCharts.add('data-chart-16', 10, 350, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 padding: {
                     left: 30,
                 },
                 //垂直方向の位置を設定します。
                 vAlign: GC.Spread.Sheets.DataCharts.VAlign.middle   //中央 (デフォルト)
             }]
         }]
     }
 });

 const dataChart17 = sheet7.dataCharts.add('data-chart-17', 550, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 padding: {
                     left: 30,
                 },
                 //垂直方向の位置を設定します。
                 vAlign: GC.Spread.Sheets.DataCharts.VAlign.bottom   //下
             }]
         }]
     }
 });

 // 8. 余白
 let sheet8 = spread.getSheet(7);
 sheet8.name("Padding");
 sheet8.setValue(13, 0, "Left Padding: 30");

 const dataChart18 = sheet8.dataCharts.add('data-chart-18', 10, 10, 400, 250, 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: [{
             legends: [{
                 type: GC.Spread.Sheets.DataCharts.LegendType.color,
                 position: GC.Spread.Sheets.DataCharts.LegendPosition.right,
                 padding: {
                     left: 30,
                 }
             }]
         }]
     }
 });