Highmaps网页图表教程之绘图区显示标签显示数据标签定位

Highmaps数据标签定位

由于数据标签是和节点一一对应，所以数据标签是依据节点位置进行定位的。本节详细讲解如何对数据标签进行定位。

Highmaps节点定位

在mappoint、mapbubble、mapline图表类型，节点都有明确位置。而在map图表类型中，节点对应的是一个区域。所以，map图表类型的节点中心位置就可以由用户来设定。设置时候需要使用到以下两个配置项：

middleX: Number1

middleY: Number2

其中，参数Number1指定节点中心在水平方向的位置，值的范围为0~1。0表示节点对应区域的最左端，1表示最右端；默认值为0.5。参数Number2指定节点中心在垂直方向的位置，值的范围为0~1。0表示区域的最顶端，1表示最底端；默认值为0.5。

Highmaps对齐定位

在节点确定后，用户就可以设置数据标签相对节点的水平和垂直对齐方式了。下面依次讲解这两种方式：

（1）使用配置项align设置水平对齐方式。其语法如下：

align: String

其中，参数String指定水平的对齐方式，允许的值包括left、center、right，默认值为center。例如，如果用户设置为left，就表示数据标签的左端和节点对齐。

（2）使用配置项verticalAlign设置垂直对齐方式。其语法如下：

verticalAlign:String

其中，参数String指定垂直的对齐方式，允许的值包括top、middle、bottom，默认值为middle。如果用户设置为top，就表示数据标签的顶端和节点对齐。

Highmaps节点偏移

数据标签相对节点定位后，用户还可以对其位置进行一定的偏移。这时需要使用到以下两个配置项。

（1）使用配置项x设置水平偏移距离，其语法如下：

x: Number

其中，参数Number指定水平偏移位置，单位为px，默认值为0。

（2）使用配置项y设置垂直偏移距离，其语法如下：

y: Number

其中，参数Number指定垂直偏移位置，单位为px，默认值为1。

【实例4-6：dataLabelsposition】下面对节点位置进行设置。核心代码如下：

series: [{
dataLabels: {
enabled: true,
color:'red',
middleX: 0.5, //设置节点中心的水平位置
middleY: 0.5, //设置节点中心的垂直位置
align: 'left', //设置水平对齐方式
verticalAlign: 'top', //设置垂直对齐方式
x: 0, //设置水平偏移距离
y:0 //设置垂直偏移距离
},
}],

执行代码后，效果如图4.6所示。

图4.6 重新设置数据标签的位置

Highmaps标签框架

标签文本外围就是标签框架。Highmaps允许用户定义框架的颜色，填充色和边框。下面依次讲解几项。

1.边框

边框是标签框架的轮廓。默认状态下，边框线宽为为0，所以看不到边框。用户可以设置边框的以下三个方面：

q 边框颜色：borderColor: Color
q 边框圆角：borderRadius: Number1
q 边框线宽：borderWidth: Number2

其中，参数Color指定边框的颜色；参数Number1指定边框的圆角半径，单位为px，默认值为0；参数Number2指定边框的线宽，单位为px，默认值为0

2.形状

默认状态下，边框的形状为矩形square。用户可以根据需要，使用配置项shape重新指定。其语法如下：

shape: String

其中，参数String指定边框形状，允许的值包括circle（圆形）、diamond（菱形）、square（矩形）、triangle（三角形）、triangle-down（倒三角形）。默认值为square。

3.背景色

为了凸显数据，用户使用配置项backgroundColor还可以设置边框的填充颜色。其语法如下：

backgroundColor: Color

其中，参数Color指定填充色颜色。

【实例4-7：dataLabelsborder】下面指定数据标签框架样式。核心代码如下：

series: [{
dataLabels: {
borderWidth: 2, //设置边框线宽
borderColor: 'black', //设置边框颜色
shape: 'circle', //设置边框形状
backgroundColor:'black' //设置填充颜色
},
}],

执行代码后，效果如图4.7所示。

图4.7 设置数据标签边框

Highmaps标签显示模式

标签阴影

当用户为标签添设置边框线宽度或者填充颜色后，还可以为标签设置阴影效果。设置标签阴影需要借助shadow配置项。其语法如下：

shadow: Boolean|Object

该配置型的值可以为布尔类型，也可以是对象类型。当值为false时，表示禁用阴影效果；当值为true时，启用阴影效果。当值为对象时，用户可以设置阴影的具体效果。其结构如下：

{
color:Color,
offsetX:Number1,
offsetY:Number2,
opacity:Number3,
width:Number4
}

其中，参数Color指定阴影的颜色；参数Number1和Number2指定阴影的水平和垂直偏移距离，单位为px；参数Number3指定阴影的透明度，值为0~1之间；参数Number4指定阴影的宽度，单位为px。

Highmaps超出绘图区显示

当节点元素接近绘图区边缘时，节点对应的数据标签往往会超出绘图区范围。默认状态下，Highmaps会自动调整数据标签的位置。如果调整后，仍然超出绘图区，则不显示该数据标签。为了避免这种情况，用户可以手动设置显示模式，避免数据标签位置的调整和舍弃。这时需要使用以下两个配置项。

（1）使用配置项overflow设置标签的浮动模式。其语法如下：

overflow: String

其中，参数String指定浮动模式类型，允许的值为justify和none。当值为justify时，Highmaps会根据情况自动调整数据标签位置；当值为none时，则禁用Highmaps的自动调整。

（2）使用配置项crop设置是否舍弃超出范围的数据标签。其语法如下：

crop: Boolean

该配置型的值为布尔类型。当值为true时，会舍弃超出绘图区的数据标签；当值为false，则显示全部的数据标签。

Highmaps绘图区内显示

在绘图区内显示时，数据标签不仅涉及和其他元素的层叠问题，还涉及多个数据标签之间互相层叠问题。下面依次讲解这两个问题。

1.和其他元素的层叠

如果数据标签被其他图表元素覆盖，这时可以通过设置数据标签的配置项zIndex来调整。其语法如下：

zIndex: Number

其中，参数Number指定层叠顺序值，默认值为6。值越大，显示越靠上。

2.标签之间的层叠

当地图区域很多时，各个区域的数据标签很容易发生层叠问题。由于同属一类元素，所以通过zIndex无法进行设置。这时候，用户可以使用数据节点配置项data提供的子配置项labelrank来设置。其语法如下：

labelrank: Number

其中，参数Number指定该节点对应的数据标签显示优先级。数值越大，优先级越高，越显示在上层。不同优先级的数据标签发生层叠后，低优先级的数据标签会被隐藏。

如果用户只希望覆盖，而不希望发生隐藏，可以设置配置项allowOverlap。其语法如下：

allowOverlap: Boolean

该配置项的值为布尔类型。当值为true时，允许数据标签重叠，而不隐藏；当值为false时，则不允许重叠。

本文选自：Highmaps网页图表基础教程大学霸内部资料，转载请注明出处，尊重技术尊重IT人！