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

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

Highmaps网页图表基础教程v1.0

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.