Highmaps网页图表教程之数据标签与标签文本
Highmaps网页图表教程之数据标签与标签文本
Highmaps数据标签
数据标签用于在地图图表上展现节点对应的数据。数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近。在Highmaps中,数据标签使用配置项dataLabels进行设置。本章将详细讲解数据标签的使用方式。
Highmaps构建数据标签
Highmaps启用数据标签
默认状态下,地图图表均不显示数据标签。用户需要在数据列中启用才可以。这时,需要使用配置项enabled。其语法如下:
enabled: Boolean
该配置项值的类型为布尔值。当值为true时,启用数据标签功能;当值为false时,禁用该功能。默认值为false。
【实例4-1:showdatalabel】下面在地图图表中显示数据标签。核心代码如下:
series: [{
type:'map',
dataLabels: {
enabled:true //启用数据列的数据标签功能
},
}],
执行代码后,效果如图4.1所示。
图4.1 显示数据标签
Highmaps数据标签设置方式
由于数据标签dataLabels定义在数据列中,所以数据标签可以在多个位置进行设置。常见的设置位置如下:
q plotOptions.series.dataLabels用于设置当前图表中所有数据列的数据标签。
q plotOptions.*.dataLabels用于设置当前图表中指定类型数据列的数据标签(*表示map、mapline、mappoint、mapbubble)。
q series.dataLabels用于设置当前数据列的数据标签。
q series.data.dataLabels用于设置当前节点的数据标签。
这几个位置设置的优先级从上到下递增。如果这几个位置的设置有重复,则上面的设置会被下面的相同设置覆盖。
Highmaps标签文本
标签文本是数据标签中所要显示的文本内容。在Highmaps中,数据标签默认显示节点的值。本节详细家过节标签文本的设置方式。
Highmaps文本内容
数据标签的唯一功能就是展现节点的值,所以标签的文本内容是重点。Highmaps允许用户对文本内容进行各种定制。下面依次讲解两种定制方式。
1.普通定制文本内容
默认状态下,文本内容就是对应节点的值。在map类型地图图表中,就是节点配置项value的值。用户可以使用配置项format和formatter进行设置。其语法如下:
format: String
formatter: Function
其中,参数String指定文本内容的格式化字符串,默认值为{point.value}。参数Function用来指定一个文本格式的回调函数。两者功能类似,但配置型format对文本进行简单的拼接,而配置项formatter可以对数据进行复杂运算和处理。
【实例4-2:datalabelsformat】下面在节点上显示节点的名字。核心代码如下:
series: [{
dataLabels: {
enabled: true,
format:'{point.name1} {point.value}' //设置显示形式
},
data: [{
name1: '山西',
code:'cn-sx',
value: 10,
}, {
name1: '广东',
code: 'cn-gd',
value:50
}, {
name1: '新疆',
code: 'cn-xj',
value:8
}, {
name1: '青海',
code: 'cn-qh',
value:9
}]
}],
执行代码后,效果如图4.2所示。从图中可以看出,有数据的节点都显示出节点名。但是没有数据的节点,都只显示了一个冒号。由于配置项format只能实现简单拼接,所以无法做到没有数据的地图区域不显示内容。下面使用配置项formatter来进行设置。
图4.2 显示节点名称和值
【实例4-3:datalabelsformatter】下面重新对数据标签进行设置,使得显示节点名称和值。核心代码如下:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.value != null) //判断是否有值
return this.point.name1 + ':' + this.point.value;
}
},
}],
执行代码后,效果如图4.3所示。从图中可以看出,这次只显示有值的节点部分。
图4.3 重新设定数据标签文本内容
2.启用HTML功能
在定义的文本内容中,用户可以添加一些基本的HTML标签,如<b>、<strong>、<i>、<br/>和<span>。这些HTML标签会自动转化为各种HTML样式。如果用户想要增加更多的内容(如图片),就需要启用HTML功能。其语法如下:
useHTML: Boolean
其中,该配置项值的类型为布尔类型。当值为true时,启用该功能;当值为false时,禁用该功能。默认值为false。
【实例4-4:datalabelsusehtml】下面在数据标签文字前面添加一个圆球图片。核心代码如下:
series: [{
dataLabels: {
enabled: true,
useHTML: true, //启用HTML功能
formatter: function () {
if (this.point.value != null)
//添加图片元素
return '<img src=circle.jpg>'+this.point.name1 + ':' + this.point.value;
}
},
}],
执行代码后,效果如图4.4所示。从图中可以看出,每个数据标签的文字前都显示一个圆球图片。
图4.4 数据标签中包含图片
Highmaps文本样式
用户除了定制标签文本内容外,还可以对文本显示格式做调整。下面讲解Highmaps支持的几个功能。
(1)用户可以使用配置项color指定字体的颜色。其语法如下:
color: Color
其中,参数Color指定文本内容所使用的颜色。
(2)用户可以使用配置项style指定文本内容所使用的CSS样式。其语法如下:
style: CSSObject
其中,参数CSSObject指定CSS样式对象。默认值为:
{
"color": "contrast",
"fontSize": "11px",
"fontWeight": "bold";
"textShadow": "0 0 6px contrast, 0 0 3px contrast"
}
(3)用户还可以使用配置项rotation旋转文本。其语法如下:
rotation: Number
其中,参数Number指定文本的旋转角度,单位为角度,并且以顺时针方向为正值。默认值为0。
【实例4-5:datalabelsstyle】下面设置数据标签文本样式。核心代码如下:
series: [{
dataLabels: {
enabled: true,
color:'red', //设置文字颜色
rotation:'20' //设置旋转角度
},
}],
执行代码后,效果如图4.5所示。
图4.5 设置标签文本样式
本文选自:Highmaps网页图表基础教程大学霸内部资料,转载请注明出处,尊重技术尊重IT人!
Highmaps网页图表教程之数据标签与标签文本相关推荐
- Highmaps网页图表教程之绘图区显示标签显示数据标签定位
Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. ...
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
- Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型
Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表.它完全使用Javascript ...
- Highmaps网页图表教程之Highmaps第一个实例与图表构成
Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...
- excel图表交互联动_深入讲解EasyShu图表与引用数据动态联动功能
EasyShu一开始的架构是将制作好的图表最终返回给用户,不依赖用户工作表的单元格区域引用,可满足图表绘制后的脱离数据源分享传播,无奈用户最强烈的反馈是要求图表与数据保持联动,这一需求实在对EasyS ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- 网页图表Highcharts实践教程标之添加题副标题版权信息
网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本 ...
- php 图表教程,TeeChart for PHP教程(一):构建图表并填充数据系列
TeeChart for PHP包含100%的PHP源代码.它支持PHP5及更高的版本.它可作为一个调色板组件整合到针对PHP的Delphi编程环境中,从而让其他人在运行时以创建组件的方式来引用.第一 ...
最新文章
- 动态卷积系列工作的基础:CondCov按需定制的卷积权重
- linux管理用户组,技术|如何在 Linux 系统中通过用户组来管理用户
- table 隔列换色
- 提取页面共性用抽象类来写页面模板
- 计网 --- 域名服务系统:因特网的目录服务
- 【C语言简单说】八:分支结构之if(1)
- Full_of_Boys训练4总结
- 选防晒霜 要看四个要点 - 健康程序员,至尚生活!
- TortoiseGit使用ssh-keygen生成的私钥
- (自然语言处理)语料、文本数据集清单
- 从键盘录入10个整数,统计有多少个奇数,Java基础轻松实现
- 爬取m3u8格式文件并下载ts文件转换为MP4文件
- Java多线程由易到难
- Simulink方波脉冲产生模块Pulse Generator详解
- Ubuntu 18.04安装全面战争三国游戏 (by quqi99)
- css实现一个三角形
- 数据分析的终极目标-预测第1辑
- Leap Motion 之Unity 开发指南(一. 基本概念与制作手预制件)
- Vue高级语法(一) | 自定义指令详解
- jc机制是什么_勇者新机制JC的一些使用技巧
热门文章
- html网页特殊符号代码
- C++中使用Json的方法
- 交换机软件IOS升级更简化了
- ThinkPad安装deepin操作系统报错解决方法
- 异常处理:SEVERE: Unable to process Jar entry [......]for annotations java.io.EOFException
- Action请求后台出现Response already commited异常解决方法
- jQuery的jquery-1.10.2.min.map触发404(未找到)
- Ajax之同步请求和异步请求的区别
- CSS 实现左侧固定,右侧自适应两栏布局的方法
- 高并发场景之RabbitMQ篇