4.3 标签组

在图表的大部分元素都提供了标签功能。但很多时候，需要额外说明一些信息。这个时候借助原有的图表元素的标签功能就不是很方便。Highcharts为用户提供了标签组功能。使用该功能可以在图表区的任意位置添加一个或者多个标签，如图4.9所示。该图表中在副标题前面增加一个标签，用以说明数据列展现的年份。

图4.9 标签组的应用

4.3.1 标签组的结构

在Highcharts中，标签组使用labels组件实现。其语法形式如下：

labels:{
    //相关配置项
}

由于标签组不隶属于任何图表元素，所以它不作为其他图表元素的子项，而直接包含在图表选项中。

4.3.2 构建标签

顾名思义，标签组是由一组标签构成。在使用的时候，用户可以定义一个，也可以定义多个标签。标签组中标签使用items组件构成。其语法如下：

items: [{
    //配置项
},
{
    //配置项
}
.........          //可以是很多项
]

其中，每个标签都由一个花括号括起来；多个标签使用逗号（，）分隔，然后用方括号（[]）括起来。

构建标签，主要使用配置项html和style来设定标签内容和位置。其语法如下：

html:String1
style:CSSObject

其中，参数String指定标签内容，该值可以是HTML代码，也可以是纯文本内容。参数CSSObject指定标签的显示位置，包含left和top配置项。其语法如下：

left:Number1
top:Number2

其中，参数Number1表示标签的水平方向偏移距离，单位为px，默认值为0；参数Number2表示标签的垂直方向偏移距离，单位为px，默认值为0。

注意：必须设置style，包括其中两个配置项left和top中的一个，这样才能显示标签。否则，光有配置项html是无法显示标签的。

【实例4-9：items】下面实现图4.9所示的标签效果。修改代码如下：

labels: {
    items: [{                                   //添加标签
        html: '2013年-2015年',                    //设置标签内容
        style: {                                //设置标签位置
            left: 10,                           //设置水平位置
            top:-25                             //设置垂直位置
        }
    }]
}

执行代码后，效果如图4.9所示。从图中可以看到，标签默认以绘图区的左上角作为原点。配置项x和y都是相对该点计算的。

4.3.3 设置标签的样式

在组件items中，可以通过配置项html指定HTML脚本的方式来设定每个标签的文本样式。为了设置方便，Highcharts还为组件labels提供配置项style来设定所有的标签样式。其语法如下：

style:CSSObject

其中，参数CSSObject用来指定所有标签共同的CSS样式。其默认值为{color: '#3E576F'}。

用户可以根据自己的需要添加特定的样式。