网页图表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标签提供支持，如、 、、、。

在文本中能够直接使用这几个基本标签。

【实例3-2：titletext】为实例1-1的标题加粗，改动代码例如以下：

title: {
text: '北京一周最高温度'
//使用加粗标签
},

运行后。效果如图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人！