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人!
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29597077/viewspace-1782889/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29597077/viewspace-1782889/