Highmaps网页图表教程之绘图区显示标签显示数据标签定位
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人!
Highmaps网页图表教程之绘图区显示标签显示数据标签定位相关推荐
- Highmaps网页图表教程之数据标签与标签文本
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签 数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
- Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表.它完全使用Javascript ...
- owc_绘图区(PlotArea)背景显示多种颜色
owc_绘图区(PlotArea)背景显示多种颜色 阅读(62) 评论(0) 发表时间:2008年07月21日 10:28 本文地址:http://www.cnblogs.com/no7dw/admi ...
- Highmaps网页图表教程之Highmaps第一个实例与图表构成
Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...
- 使用Python操作Excel图表之 为最后一个数据点添加数据标签
添加数据标签 是什么 我们咨询了一下new bing,他告诉我们,数据标签是一种用来描述业务实体特征的数据形式.在Excel中,您可以使用数据标签来显示图表中每个数据点的值.例如,在折线图中,您可以在 ...
- excel 区间人数柱状图_Excel图表教程:区间柱状图
今天,我们继续学习图表,要画的图表是[区间柱形图],是关于一年12个月的温度变化的区间图. 效果图如下所示: 这样的图要表达的意思很清晰,就是把某个时间点的最大和最小值在图上用柱子连起来,从而形成区间 ...
- 在excel图表上添加数据标签
在excel图表上添加数据标签 觉得有用的话,欢迎一起讨论相互学习~ 方法与步骤 在Excel2013中,选中柱子右键-添加数据标签-----添加数据标签(B),如下图:
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
最新文章
- swig error : Unrecognized option -doxygen Ubuntu 安装 swig-3.0.12
- 在Ubuntu 16.04.3 LTS上安装Go 1.10
- apache 安装与配置详细教程
- JavaScirpt类型检测函数总结
- 理想边界尺寸怎么算_钻石型淋浴房三边尺寸怎么算?安装步骤有哪些?
- P3514-[POI2011]LIZ-Lollipop【思路题】
- 【操作系统复习】操作系统的发展与分类
- PHP公鸡五文钱,公鸡
- Java虚拟机------垃圾收集器
- 第一百天 how can i 坚持
- 【CSS3】C3动画总结
- java 加背景颜色_Java 给PPT幻灯片添加背景颜色和背景图片
- 用计算机术语写毕业寄语,毕业寄语大全一句话
- 计算机汉字的输入方法有哪些,《计算机汉字输入方法.ppt
- 微软因果推理的框架DoWhy github 介绍
- 【Kotlin】FarawayPlayer
- 【Unity】Jay 开发日志(六)——暂停和结束菜单的创建
- Vue父组件与子组件传递事件/调用事件
- python echo(msg) 字符串_python的subprocess模块
- 「更快!更爽!」吹水新闻2.0
热门文章
- java awt显示到组件中出现乱码
- WP7应用开发笔记(12) 添加页面动画
- Android 自定义View的使用纪要!!!
- 提高工作效率-shell操作快捷键
- LINQ中的Let关键字
- Win7 IIS7 HTTP 错误 404.2 - Not Found解决方法 ISAPI CGI
- PHP 利用PHPExcel到处数据到Excel;还有导出数据乱码的解决方案。
- Python——raise引发异常
- 关于Jenkins日志爆满的解决方法
- Could not install packages due to an Environment Error: [Errno 13] Permission denied 解决方案