网页图表Highcharts实践教程标之添加题副标题版权信息
网页图表Highcharts实践教程标之添加题副标题版权信息
Highcharts辅助元素
辅助元素图表的非必要元素,如标题、版权信息、标签、载入动态。它们不和图表数据发生关联,只是额外说明一些基本信息。合理的使用这些部分,可以补充数据的不足。本章将详细讲解几种常见的辅助元素。
Highcharts标题/副标题
为了说明图表展现的数据,Highcharts为每个图表提供标题title和副标题subtitle两个组件。本节将详细讲解这两个组件的使用方式。
Highcharts标题和副标题的构成
在实例1-1中,我们已经接触到标题的构建了。其中构建标题的代码如下所示:
title: {
text: '北京一周最高温度'
},
其中,title标记为图表构建一个标题;配置项text表示标题的内容。其语法如下:
text:String
其中,参数String指定标题的文本内容。默认值是'Chart title'。如果不要想要标题,必须将设置为null。
副标题subtitle的构成方式类似于标题title。其语法形式如下:
subtitle:{
text:String
}
subtitle组件也具有配置项text。该配置项的默认值为空。如果不设置配置项text,则不显示副标题。
【实例3-1:title】修改实例1-1的源代码如下:
chart: {
type: 'line'
},
subtitle: {
text:''
},
series: [{
name: '最高温度',
data: [7, 11, 8, 7, 9, 9, 9]
}]
执行代码,运行结果如图3.1所示。虽然在代码中没有设置title组件,但图表仍然显示一个默认标题,标题内容为Chart title。同时,虽然设置副标题subtitle,但标题内容为空,所以没有副标题。
图3.1 修改后的图表
Highcharts标题的样式
标题的内容为文本形式。Highcharts默认对一些基本HTML标签提供支持,如<b>、<br/>、<em>、<i>、<strong>。在文本中可以直接使用这几个基本标签。
【实例3-2:titletext】为实例1-1的标题加粗,修改代码如下:
title: {
text: '<b>北京一周最高温度</b>' //使用加粗标签
},
执行后,效果如图3.2所示。从图中可以明显看出,标题被加粗了。
图3.2 加粗的标题
虽然这五个标签功能常用,但是功能有限。为了扩展功能,title和subtitle都提供以下两种方式。
1.HTML渲染useHTML
设置配置项useHTML后,可以允许在标题文本中使用其他HTML标签。其语法如下:
useHTML:Boolean
其中,参数Boolean为布尔值,可以为true和false。默认值为false,表示不支持使用其他的HTML标签。
2.设置标题样式style
用户也可以指定标题文本所使用的CSS样式。其语法形式如下:
style:CSSObject
其中,参数CSSOjbect为CSS样式对象。默认值为{"color": "#555555" }。
Highcharts标题的布局方式
由于标题位于图表区内部,往往还在绘图区的上面。所以,标题的布局依赖于这两者。下面详细讲解标题的布局方式。
1.标题相对图表区的布局
由于标题区在图表区内部,所以标题可以以图表区作为标准,进行对齐。这时,需要使用title/subtitle的配置项align和verticalAlign。其语法如下所示:
align:String1
verticalAlign:String2
其中,参数String1表示水平对齐方式,值包括left、center、right,默认值为center;参数String2表示垂直对齐方式,值包括top、middle、bottom。
【实例3-3:titlealign】设置实例1-1的标题在左下角显示。修改代码如下:
title: {
text: '北京一周最高温度',
align: 'left', //设置水平左对齐
verticalAlign:'bottom' //设置垂直底对齐
},
执行后,效果如图3.3所示。
图3.3 设置标题的对齐方式
2.标题相对绘图区的布局
标题和绘图区都位于绘图区内部,标题可以浮动在绘图区上,也可以不浮动。用户可以通过配置项floating设置是否浮动。其语法如下:
floating:Boolean
其中,参数Boolean的值包括true和false。默认值为false
【实例3-4:titlefloating】设置实例1-1的标题为浮动方式,修改代码如下:
title: {
text: '北京一周最高温度',
floating:true //设置浮动方式
},
执行代码,效果如图3.4所示。从图中可以看到,标题进入了绘图区中。
图3.4 设置标题的浮动方式
如果设置了配置项verticalAlign的值,默认启用浮动方式。subtitle也可以设置浮动方式。如果图表同时包含标题和副标题,建议两者浮动方式统一,并且只在title中设置。否则,会造成两个标题重合。当标题不设置浮动,可以通过配置项margin设置标题和绘图区的间距。其语法如下:
margin:Number
其中,参数Number表示标题和绘图区的间距,单位是px。默认值为15。如果存在副标题,则间距为Number+15。
【实例3-5:titlemargin】下面将实例1-1中的标题和绘图区间距进行修改,修改代码如下:
title: {
text: '北京一周最高温度',
margin: 100 //设置间距为100
},
subtitle: {
text: '2015.02.08--2015.02.14'
},
执行后,效果如图3.5所示。从图中可以看出,标题距离绘图区的距离是100px+15px。其中,15px是副标题和绘图区的默认间距。
图3.5 设置标题和绘图区间距
3.标题的偏移位置
除了使用align和verticalAlign对齐外,标题和副标题还可以基于对齐方式进行进一步的偏移。这一点与重置按钮resetZoomButton类似。它也通过横向偏移配置项x和纵向偏移配置项y实现。其语法如下:
x:Number1
y:Number2
其中,参数Number1表示横行偏移距离的值,单位为px,默认值为0;参数Number2表示纵向偏移距离的值,单位为px。
【实例3-6:titlexy】下面将实例1-1的标题位置进行偏移,修改代码如下:
title: {
text: '北京一周最高温度',
align: 'left', //设置横向对齐方式
x:100 //设置横向偏移距离
},
执行后,效果如图3.6所示。为了方便观察偏移位置,这里设置显示图表边框线。图表区与内部的图表元素本来左侧默认有10px的间隔。设置标题横向左对齐后,并设置偏移100px后,标题距离图表区的左边框距离为100+10=110px。
图3.6 标题的偏移位置
由于副标题的设置效果与标题的设置效果等同,这里不再讲解。
Highcharts版权信息
版权信息可以帮助浏览者明确信息发布者和权利所属者。通常版权信息为与右下角。我们前面实例中右下角,都有Highcharts.com的版权信息比较,如图3.7所示。
图3.7 版权信息
Highcharts图表的版权信息是由组件credits实现的。其语法如下:
credits: {
//配置项
}
下面讲解常见的版权信息配置项。
Highcharts启用版权信息
默认情况下,显示版权信息功能是开启的。但很多时候,为了节省图表空间,需要禁用该功能。这时需要使用设置配置项enable。其语法如下:
enabled: Boolean
其中,enabled的值类型为布尔类型。如果值为true,则显示版权信息;如果为false,则不显示版权信息。默认值为true。如果要禁用该功能,只需要将该配置项的值设置为false即可。
【实例3-7:creditsenabled】下面禁止图表的版权信息显示。修改代码如下:
credits: {
enabled:false //禁止显示版权信息
}
Highcharts设置版权信息内容
默认图表中的版权信息内容是Highcharts.com,而单击后,会跳转到Highcharts的官网http://www.highcharts.com/。对于开发者来说,这都是需要修改。用户可以通过配置项text和href来指定自己需要的版权信息。其语法如下:
text: String1
href: String2
其中,参数String1指定版权信息的文本内容,默认值为Highcharts.com;参数String2指定版权信息的超链接网址,默认值为http://www.highcharts.com/。
【实例3-8:textandhref】下面修改图表默认的版权信息,修改代码如下:
credits: {
text: '大学霸', //设置版权信息文本
href:'http://daxueba.net' //设置版权信息的超链接
}
执行后,运行结果如图3.8所示。从图中看到,版权信息已经修改为代码所设置的信息了。
图3.8 定制版权信息
Highcharts设置版权信息位置和样式
除了能设置版权信息内容外,用户还可以设置版权信息显示的位置和各种样式。这时,需要使用配置项position和sytle。其语法如下:
position: Object
style: CSSObject
其中,参数Object指定版权信息显示的位置信息,可以包含的项如下:
q align:表示水平对齐方式,值可以为left、center、right。默认值为right。
q verticalAlign:表示垂直对齐方式,值可以为top、center、bottom。默认值为bottom。
q x:表示水平偏移位置,单位为px。默认值为-10。
q y:表示垂直偏移位置,单位为px。默认值为-5。
所以,参数Object的默认值为
{
align:'right',
verticalAlign:'bottom',
x:-10,
y:-5
}
参数CSSObject指定版权信息的CSS样式。默认值如下:
{
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
本文选自:网页图表Highcharts实践教程基础篇大学霸内部资料,转载请注明出处,尊重技术尊重IT人!
网页图表Highcharts实践教程标之添加题副标题版权信息相关推荐
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- 网页图表Highcharts实践教程之外层图表区
网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- 网页图表Highcharts实践教程之认识Highcharts
网页图表Highcharts实践教程之认识Highcharts 第1章 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使 ...
- 博客园随笔添加自己的版权信息 [转]
这几日,看了一些博客.发现在一些博客的底部添加了一些版权信息,很新颖.如下图: 写信给博客园的客服,问如何做出来的.回复是添加自己的"签名".无语了,只能自己研究了. 在分析了别人 ...
- 如何用代码上传头像,并添加自己的版权信息?
头像,代表着一个人的形象,漫漫网络,判断网络背后的一个人,从头像开始!于是乎,头像设置和上传很关键! 在这个小程序商城系统盛行的时代,一不小心就被盗版商钻了空子,不仅用户损失了利益,多企业品牌形象也会 ...
最新文章
- [docker] 04 使用docker容器
- 【多线程】ThreadPoolExecutor类源码解析----续(二进制相关运算)
- Yii Model中添加默认搜索条件
- MS SQL数据库日志压缩方法[转]
- 深入hibernate的三种状态
- ImageButton 无法显示
- python课堂点名_Python制作课堂点名器,原来还能这么玩!
- pic单片机用c语言怎么编程,手把手教你学PIC单片机C语言指导教程.pdf
- wps的range对象
- python抓取电影海王影评词云生成
- java实现第五届蓝桥杯出栈次序
- 远程移动测试平台对比分析
- JVM笔记-性能监控与分析工具
- Excel只保留2位小数,删掉其他小数位
- 贝叶斯公式推导及意义
- chrome无痕模式可访问但正常模式访问不了
- 拜登承诺将把GDP的“近2%”用于科学研究;机器学习显示出增强量子信息传输的潜力|全球量子科技与工业快讯第十四期
- vc 读服务器文件,vc从服务器读取文件
- B树,B-树和B+树的区别
- Java空白字符和空白符号的区别
热门文章
- confluence中org.apache.tomcat.util.net.NioEndpoint$Acceptor.run Socket accept failed的解决方法
- 跨域产生的原因及解决方法
- 【ASP.NET Core】处理异常(上篇)
- 解决Tomact启动时问题 Port 8080 required by Tomcat v8.0 Server at localhost is already in use.
- 解决eclipse报PermGen space异常的问题
- 哪个websocket库与Node.js一起使用? [关闭]
- 每日一学|数据中心spine leaf网络架构
- Ros学习调试——rqt_console
- 彻底理解android中的内部存储与外部存储
- 如果想成为一名顶尖的前端,这份书单你一定要收藏!