网页图表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对齐外,标题和副标题还能够基于对齐方式进行进一步的偏移。这一点与重置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所看到的。从图中看到。版权信息已经改动为代码所设置的信息了。
图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人!