凡例

Spread.Sheetsでは、チャートの凡例を設定およびカスタマイズできます。

凡例とは

凡例は、プロットされたデータを理解しやすくするために、チャートに添えるラベルです。チャートの凡例項目は、チャートにプロットされたデータカテゴリの名前を表します。データを効果的に視覚化するため、1つのチャートに含まれる個々の凡例項目は、それぞれ異なる色で表示されます。

使用例

デフォルトの凡例設定では、多くの場合、データについての第一印象を明確に伝えることができません。Spread.Sheetsを使用すると、必要に応じて、凡例の位置をカスタマイズしたり、スタイルを適用したり、凡例の書式設定ができます。凡例をカスタマイズすることにより、チャートが標準化されたプロフェッショナルな外観になり、他のチャートから目立つようになります。

例 - 次の図は、さまざまな地理的地域ごとの月間降雨量の平均を表すチャートを示します。このチャートは、凡例の高度なカスタマイズプロパティ（カスタム凡例の枠線のスタイル、カスタムフォント、カスタムの背景色、カスタムの凡例位置（右上））を使用して書式設定され、Spread.Sheetsのデータを効果的に表します。

チャートへの凡例の追加

チャートに凡例を追加する主な目的は、ユーザーにプロットされた情報を簡単に理解させ、データを分析できるようにすることです。チャートに凡例を定義すると、ワークシートの行および列に表したデータを分かりやすく説明でき、チャートにプロットされた情報を理解しやすくできます。

例えば、上記のチャート例では、地域名を表すために追加された4つの凡例項目（東京、ニューヨーク、ロンドン、ベルリン）があります。

チャートで凡例の表示・非表示を制御するには、Visibleプロパティを使用できます。デフォルトでは、このプロパティはtrueに設定され、チャートに凡例が表示されます。

次のコードは、グラフの凡例を設定する方法を示します。

JavaScript	コードのコピー
// 凡例を設定します。 var legend = chart.legend(); legend.visible = true; chart.legend(legend);

凡例の形式、位置、スタイルのカスタマイズ

凡例の書式設定、位置のカスタマイズ、スタイルの適用を行うと、チャートの外観が向上することだけでなく、チャートを強調表示して発表できます。チャートの凡例に使用できる高度なカスタマイズオプションにより、ユーザーがビジネス要件やカスタムの分析設定に応じて、見栄えの良いチャートを作成できます。

凡例の書式設定と配置設定 - Spread.Sheetsでチャートを作成する場合、デフォルトで凡例がチャートエリアの下部に表示されます。必要に応じて、legend メソッドおよびLegendPosition列挙体を使用して凡例を上、下、左、右や右上に表示することができます。
凡例スタイルの変更 - Spread.Sheetsでは、borderStyleプロパティとbackColorプロパティを使用し、凡例の枠線スタイルと背景色もカスタマイズすることができます。また、グラフの凡例のフォントの色、フォントサイズ、およびフォントファミリをカスタマイズするには、fontSize、fontFamily、およびcolorプロパティを使用できます。

コードの使用

次のコードは、さまざまな地理的地域ごとの月間降雨量の平均を表すチャートに対し、書式、位置、およびスタイルをカスタマイズした凡例を設定します。

JavaScript	コードのコピー
<script type="text/javascript"> var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); sheet = spread.getActiveSheet(); sheet.suspendPaint(); var dataArray = [ ["", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], ["東京", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], ["ニューヨーク", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], ["ロンドン", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], ["ベルリン", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] ]; sheet.setArray(0, 0, dataArray); // 集合縦棒チャートを追加します。 chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 20, 110, 550, 250, "A1:M5"); // チャートでアニメーションを使用します。 chart_columnClustered.useAnimation(true); // チャートのタイトルを設定します。 var title = chart_columnClustered.title() title.fontSize = "18.00"; title.color = "rgb(228,65,54)"; title.text = '月平均降雨'; chart_columnClustered.title(title); // 凡例を書式設定します。 // 凡例のcolor、fontSize、backColorおよびfontFamilyプロパティを設定します。 var legend = chart_columnClustered.legend(); // 凡例の可視性をtrueに設定します。 legend.visible = true; legend.color = 'Green'; legend.fontSize = 12; legend.fontFamily = 'Calibri'; legend.backColor = 'Yellow'; // 凡例の位置をカスタマイズします。 // 凡例の位置をtopRightに変更します。 var legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.topRight; // 凡例スタイルをカスタマイズします。 // 凡例の枠線スタイルを変更します。 legend.borderStyle.width = 1; legend.borderStyle.color = "blue"; legend.borderStyle.backColor = "Red"; chart_columnClustered.legend(legend); sheet.resumePaint(); }; </script>

JavaScript

コードのコピー

var dataArray =

[
["", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
["東京", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["ニューヨーク", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["ロンドン", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["ベルリン", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
];
sheet.setArray(0, 0, dataArray);

// 集合縦棒チャートを追加します。
chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 20, 110, 550, 250, "A1:M5");

// チャートでアニメーションを使用します。
chart_columnClustered.useAnimation(true);

// チャートのタイトルを設定します。
var title = chart_columnClustered.title()
title.fontSize = "18.00";
title.color = "rgb(228,65,54)";
title.text = '月平均降雨';
chart_columnClustered.title(title);

// 凡例を書式設定します。
// 凡例のcolor、fontSize、backColorおよびfontFamilyプロパティを設定します。
var legend = chart_columnClustered.legend();

// 凡例の可視性をtrueに設定します。
legend.visible = true;
legend.color = 'Green';
legend.fontSize = 12;
legend.fontFamily = 'Calibri';
legend.backColor = 'Yellow';

// 凡例の位置をカスタマイズします。

// 凡例の位置をtopRightに変更します。
var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
legend.position = legendPosition.topRight;

// 凡例スタイルをカスタマイズします。

// 凡例の枠線スタイルを変更します。
legend.borderStyle.width = 1;
legend.borderStyle.color = "blue";
legend.borderStyle.backColor = "Red";
chart_columnClustered.legend(legend);
sheet.resumePaint();
};
</script>