网页图表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所看到的。
从图中能够明显看出。标题被加粗了。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
图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是副标题和画图区的默认间距。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
图3.5 设置标题和画图区间距
3.标题的偏移位置
除了使用align和verticalAlign对齐外,标题和副标题还能够基于对齐方式进行进一步的偏移。这一点与重置buttonresetZoomButton类似。它也通过横向偏移配置项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所看到的。从图中看到。版权信息已经改动为代码所设置的信息了。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
图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实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- 网页图表Highcharts实践教程之认识Highcharts
网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- 网页图表Highcharts实践教程之标签组与加载动画
网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...
- Highcharts使用教程(2):设置选项
Highcharts使用教程(2):设置选项 使用教程 | 作者:走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1 概述:JavaScript图表工具Highchar ...
- Highmaps网页图表教程之图表配置项结构与商业授权
Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...
随机推荐
- Windows远程连接局域网内或同一个网段或同一个路由器的某台机器
http://bbs.shendu.com/thread-1443245-1-1.html 亲自试验,具体操作如下: 我现在有三台机器和对应的ip地址(ip地址自己手动填写,不会网上搜) ...
- 修改TreeList单元格格式(实现类似单元格合并效果)
关键点:(1)TreeList中显示的单元格默认不显示上.下.左.右边框,显示的是TreeList自身的行横边框.列纵边框,具体对应TreeList属性中OptionView项下的ShowVertLi ...
- 文件的内核结构file和dup实现重定向
一.打开文件内核数据结构 1.一个进程打开两个文件 文件状态标志:读.写.追加.同步.非阻塞等 2.一个进程两次打开同一文件 3.两个进程打开同一文件 示例程序: C++ Code 1 2 3 4 ...
- Unix域套接字简介
在Linux系统中,有很多进程间通信方式,套接字(Socket)就是其中的一种.但传统的套接字的用法都是基于TCP/IP协议栈的,需要指定IP地址.如果不同主机上的两个进程进行通信,当然这样做没什么问 ...
- hdu 4971/ 2014多校/最大权闭合图
题意:n个项目(每一个相应获得一定价值).m个技术问题(每一个须要支出一定价值),每一个项目必须要攻克若干个技术问题.技术难题之间有拓扑关系. 关键是建图.一看,第一感觉就是最大权闭合图,马上建好了图 ...
- php 7.1安装教程
一.下载地址 http://php.net/downloads.php#v7.1.9 IIS如果你使用的是PHP的FastCGI IIS,你应该使用非线程安全(NTS)版本的PHP. Apache请使 ...
- php-fpm 启动参数及重要配置详解(转)
约定几个目录 /usr/local/php/sbin/php-fpm /usr/local/php/etc/php-fpm.conf /usr/local/php/etc/php.ini 一,php- ...
- ubuntu14.4开启ftp服务
1 更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码" ...
- 深入理解Docker Volume(二)
一开始,认为Volume是用来持久化的,但是这实际上不对,因为认为Volume是用来持久化的同学一定是认为容器无法持久化,所以有了Volume来帮助容器持久化,事实上,容器会一直存在,除非你删除他 ...
- Java高级面试题积累(二)
简述23种设计 抽象工厂模式(Abstract Factory):提供一个创建一系列相关或相互依赖对象的接口.而无需指定它们详细的类. 适配器模式(Adapter):将一个类的接口转换成客户希望的另外 ...