5.2 图例区
图例区是显示图例元素的区域。它往往位于图表区域的底端或右侧。本节详细讲解图例区的基本设置、布局和边框等相关内容。
5.2.1 图例区基本设置
图例区的基本设置主要包括图例区的启用、背景、阴影和大小。下面依次讲解这些设置。
1．启用／禁用图例区
每个图表默认启用图例区，这样会自动显示图例区。对于简单的图表，用户也可以考虑禁用图例区，来节省空间。这时需要使用配置项enabled。其语法如下：
enabled: Boolean
其中，enabled的值是布尔类型，只能为true或者false。默认值为true，表示启用图例区。当用户将配置项enabled设置为false后，图表区中将不再显示图例区。
2．设置图例区背景
为了图表美观，用户可以为图例区添加背景色，这时需要使用配置项backgroundColor。其语法如下：
backgroundColor: Color
其中，参数Color表示颜色值。默认是没有定义的。
3．设置图例区阴影
除了设置背景颜色，用户还可以通过配置项shadow为图例区添加阴影。shadow语法如下：
shadow: Boolean|Object
其中，shadow的参数可以为两个类型：
当为Boolean类型时，其值可以为true和false。为true时，表示有阴影；为false时，表示没有阴影。默认值为false。
当为Object类型时，其语法形式如下：
{
color:Color,
offsetX:Number,
offsetY:Number,
opacity:Number,
width:Number
}
【实例5-1：shadow】下面演示为图表的图例区添加阴影。代码如下：
legend: {
shadow:true //启用阴影效果
}
执行代码后，效果如图5.2所示。从图中可以看到，图例区并没有显示阴影。
图5.2 添加阴影不成功
要想成功显示出阴影，需要配合配置项borderWidth或者backgroundColor来使用。下面依次演示这两种情况。
（1）配合边框线宽度配置项borderWidth，修改代码如下：
legend: {
borderWidth:1, //设置边框为1
shadow:true
}
执行代码后，效果如图5.3所示。从图中可以看到，图例区边框下方有阴影效果。由于图例区背景透明，所以效果并不真实。
图5.3 配合配置项borderWidth
（2）配合图例区背景配置项backgroundColor，修改代码如下：
legend: {
backgroundColor:'#FFFFFF', //设置图例区背景色为纯白色
shadow:true
}
执行代码后，效果如图5.4所示。从图中可以看出，由于图例区背景不透明，阴影效果就非常逼真了。
图5.4 配合配置项backgroundColor
4．设置图例区大小
图例区大小默认是有Highcharts自动计算的。当图例项目较多的时候，会影响整个图表区的美观。这时，可以通过配置项width和maxHeight来设置。其语法如下：
width: Number1 maxHeight: Number2
其中，参数Number1用来指定图例区的宽度；参数Number2用来指定图例区的最大高度。当指定的宽度较小时，图例项目会折行显示。
【实例5-2：width】下面修改图例区的宽度，让图例项目单列显示。修改代码如下：
legend: {
width:100 //设置图表区宽度
}
执行代码后，效果如图5.5所示。从图中可以看出，这时图例项目从原有的单行显示改变为单列显示。
图5.5 图例项目单列显示
当图例项目较多的时候，图例区的高度会超过maxHeight的设定值。这时，图例区就会显示导航条。相关内容，会在后面单独讲解。
5.2.2 图例区的布局
图例区作为图表的一个构成区域，合理的布局不仅可以增加图表的美观，更可以提高图表阅读者的阅读效率。下面详细讲解图例区的布局技巧。
1．启用浮动
图例区默认显示在绘图区外面。为了节省图表空间，也可以让图例区显示在绘图区内部。这时，需要设置浮动配置项floating。其语法如下：
floating: Boolean
其中，值的类型为布尔类型。如果值为true，表示允许浮动；否则，表示不允许浮动。默认值为false。
【实例5-3：floating】下面设置允许图例区浮动，修改代码如下：
legend: {
floating:true //设置浮动
}
执行代码后，效果如图5.6所示。从图中可以看到，图例区和坐标轴重叠显示了。想要获取更好的显示效果，需要调整图例区的对齐方式和偏移位置。
图5.6 设置图例区浮动
2．设置对齐方式和偏移位置
Highcharts允许用户手动指定图例区显示位置，如对齐方式和偏移位置。用户可以设置的配置项包括：水平对齐方式align、垂直对齐方式verticalAlign、水平偏移位置x、垂直偏移位置y。其语法如下：
align: String1 verticalAlign: String2 x: Number1 y: Number2
其中，参数String指定水平对齐方式，值可以为left、center和right，默认值为center；参数String2指定垂直对齐方式，值可以为top、middle和bottom，默认值为bottom；参数Number1指定水平偏移距离，默认值为0；参数Number2指定垂直偏移距离，默认值为0。
注意：配置项align、verticalAlign和配置项floating配合使用时，效果会产生互相干涉。
【实例5-4：align】下面将配置项align和floating搭配使用，修改代码如下：
legend: {
//floating:true, //设置浮动模式
align: 'left' //设置水平对齐方式
}
依次修改水平对齐方式，并设定是否浮动，执行代码后，效果如图5.7～图5.9所示。
图5.7 水平居左对齐
图5.8 水平居中对齐
图5.9 水平居右对齐
从图5.7和图5.8中可以看出，浮动模式对水平居左和水平居右对齐模式影响最大。
【实例5-5：verticalAlign】下面将配置项verticalAlign和floating搭配使用，修改代码如下：
legend: {
//floating:true,
verticalAlign: 'top' //设置垂直对齐方式
}
依次修改垂直对齐方式，并设定是否浮动，执行效果如图5.10～图5.12所示。从图中可以看出，浮动模式对垂直底端对齐造成影响，对其他模式不造成任何影响。
图5.10 垂直顶部对齐
图5.11 垂直居中对齐
图5.12 垂直底端对齐
当设置水平和垂直居中对齐后，就可以继续通过水平偏移位置配置项x、垂直偏移位置配置项y对图例区的位置进行进一步的调整和控制。
3．设置内外间距
图例区作为一个区域，并且内部包含其他元素，所以它与外部元素和内部元素都有一定间距。用户可以通过配置项margin和padding来设置。语法如下：
margin: Number1 padding: Number2
其中，参数Number1指定图例区和绘图区、坐标轴标签的间隔，单位为px，默认值为12；参数padding指定图例区边框和内部元素的间隔，单位为px，默认值为8。
注意：当浮动配置项floating设置为true后，margin的设置无效。
5.2.3 图例区边框
图例区默认不显示边框。为了区分图例区和图表区的其他元素，可以设置显示边框，并设置边框的样式。这时，需要使用配置项边框线宽borderWidth、颜色borderColor和圆角半径borderRadius。其语法如下：
borderWidth: Number1 borderColor: Color borderRadius: Number2
其中，参数Number1用来设置边框线宽，单位为px，默认值为0，所以不显示边框线；参数Color用来设置边框线颜色，默认值为#909090；参数borderRadius用来设置边框圆角半径，单位为px，默认值为0。
【实例5-6】下面为图表显示边框，并设置边框的样式。修改代码如下：
legend: {
borderWidth: 2, //设置线宽
borderColor: '#C0C000', //设置颜色
borderRadius:20 //设置圆角半径
}
执行代码后，图例区效果如图5.13所示。
图5.13 定制的图例区边框