图例

SpreadJS允许用户在图表中配置和自定义图例。

什么是图例?

图例是指图表中的标签，可帮助用户理解绘制的数据。图表中的图例条目是指在图表中绘制的数据类别的名称。图表中的每个图例条目均具有唯一的颜色，以实现更好的数据可视化。

使用场景

默认图例设置通常在第一印象中就无法清晰地传达有关数据的信息。使用SpreadJS，您可以自定义图例位置，应用样式并根据您的特定首选项对其设置格式。图例自定义设置可以使您的图表在其他图表中脱颖而出，同时具有极为标准化和专业的外观。

示例 - 下面显示了描述不同地理区域的平均月降雨量的基本图表。此图表已在SpreadJS中使用图例的高级自定义属性（自定义图例边框样式，自定义字体，自定义背景色和自定义图例位置（右上角））格式化，以清晰有效地表示数据。

将图例添加到图表

在图表中添加图例的主要目的是使读者易于理解所绘制的信息并分析数据。您可以在图表中定义图例，以显示位于表单的行和列中的数据的描述，并帮助用户理解图表中绘制的信息。

例如-在上面的图表图像中，您可以看到四个图例条目：添加了东京，纽约，伦敦和柏林以表示区域名称。

您可以通过设置图表的 visible 参数 legend() 方法设为true或false来控制在图表中显示还是隐藏图例。默认情况下，legend（）方法的visible参数设置为true，并且图例在图表中可见。

以下示例代码可用于在图表中配置图例。

// 配置图例
 var legend = chart.legend();
legend.visible = true;
chart.legend(legend);

自定义图例格式位置样式

设置图例格式，自定义其位置和应用样式，不仅可以增强图表的美学外观，还可以帮助用户创建功能更强大的图表演示文稿。图表图例提供的高级自定义选项使用户可以根据他们的特定业务需求和自定义分析偏好来创建美观的图表。

设置图例的格式和位置 -在SpreadJS中创建图表时，默认情况下，图例显示在图表区域的底部。但是，您可以变更图例的默认位置以在五个不同位置显示它 - top, bottom, left, right 与 top right 使用 legend 方法 and LegendPosition 枚举.
修改图例样式 - SpreadJS还支持自定义图例的边框样式和背景颜色。这可以通过使用 borderStyle 属性和 backColor 属性来完成。此外，用户还可以使用 fontSize ， fontFamily 和 color 在图表中自定义图例的字体颜色，字体大小和字体系列。

代码

下面共享的示例代码生成具有自定义图例格式，位置和样式的图表，以描绘各个地区的平均月降雨量。

<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 =
[
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
["Berlin", 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 = 'AVERAGE MONTHLY RAINFALL';
chart_columnClustered.title(title);
// 格式化图例
// Configure Legend's color, fontSize, backColor and fontFamily properties
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>