​网页图表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对齐外，标题和副标题还能够基于对齐方式进行进一步的偏移。这一点与重置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人！