Highmaps网页图表教程之绘图区显示标签显示数据标签定位
Highmaps网页图表教程之绘图区显示标签显示数据标签定位
Highmaps网页图表基础教程v1.0
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人！
Comments are closed.