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网页图表教程之数据标签与标签文本的更多相关文章

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

    Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位 由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. H ...

  2. Highmaps网页图表教程之图表配置项结构与商业授权

    Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...

  3. Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型

    Highmaps网页图表教程之下载Highmaps与Highmaps的地图类型 认识Highmaps Highmaps是Highcharts的姊妹框架,用来实现地图图表.它完全使用Javascript ...

  4. Highmaps网页图表教程之Highmaps第一个实例与图表构成

    Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...

  5. 网页图表Highcharts实践教程之标签组与载入动画

    网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...

  6. ​网页图表Highcharts实践教程之标签组与加载动画

    ​网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...

  7. 网页图表Highcharts实践教程标之添加题副标题版权信息

    网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信 ...

  8. ​网页图表Highcharts实践教程标之加入题副标题版权信息

    ​网页图表Highcharts实践教程标之加入题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素.如标题.版权信息.标签.加载动态.它们不和图表数据发生关联,仅仅是额外说明一些基 ...

  9. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

随机推荐

  1. flask配置日志输出文件

    1.flask可以通过日志库来指点日志输出的路径, 配置日志输出的连接:www.gaodin.com

  2. JS设计模式——7.工厂模式(示例-XHR)

    XHR工厂 基本实现 var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']); var SimpleHandl ...

  3. iOS学习笔记(1)— UIView 渲染和内容管理

    iOS中应用程序基本上都是基于MVC模式开发的.UIView就是模型-视图-控制器中的视图,在iOS终端上看到的.摸到的都是UIView. UIView在屏幕上定义了一个矩形区域和管理区域内容的接口. ...

  4. python模块-platform

    #author:Blood_Zero #coding:utf- import platform print dir(platform) #获取platform函数功能 platform.archite ...

  5. PHP验证注册信息

    注册页面reg.html <form action="reg.php" method="post"> 用户名<input type=" ...

  6. Android平台介绍

    一.Android平台介绍 什么是智能手机 具有独立的操作系统,独立的运行空间,可以由用户自行安装软件.游戏.导航等第三方应用程序,并可以通过移动通讯网络来实现无线网络接入的手机类型总称. 智能手机操 ...

  7. 触发器Demo

    --mysql 触发器简单实例 --创建表1 )) ; --创建表2 )); --创建触发器,表一增加数据时,表二自动增加数据 create trigger t_afterinsert_on_tab1 ...

  8. ubuntu16.04 源码方法安装tensorflow

    参考博客:http://blog.csdn.net/zhaoyu106/article/details/52793183/,http://blog.csdn.net/u010900574/articl ...

  9. perl6 Net::HTTP 发送任意 url 请求例子

    只做个笔记, 用 HTTP::UserAgent 的话, url 中有特殊点的符号会请求不了, 用 Net::HTTP 能很好的发送请求. use Net::HTTP::GET; my $url = ...

  10. Codeforces 859E Desk Disorder 并查集找环,乘法原理

    题目链接:http://codeforces.com/contest/859/problem/E 题意:有N个人.2N个座位.现在告诉你这N个人它们现在的座位.以及它们想去的座位.每个人可以去它们想去 ...