​网页图表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实践教程标之加入题副标题版权信息的更多相关文章

  1. 网页图表Highcharts实践教程标之添加题副标题版权信息

    网页图表Highcharts实践教程标之添加题副标题版权信息 Highcharts辅助元素 辅助元素图表的非必要元素,如标题.版权信息.标签.载入动态.它们不和图表数据发生关联,只是额外说明一些基本信 ...

  2. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  3. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  4. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  5. 网页图表Highcharts实践教程之标签组与载入动画

    网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...

  6. 网页图表Highcharts实践教程之图表区

    网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...

  7. ​网页图表Highcharts实践教程之标签组与加载动画

    ​网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...

  8. Highcharts使用教程(2):设置选项

    Highcharts使用教程(2):设置选项 使用教程 | 作者:走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1 概述:JavaScript图表工具Highchar ...

  9. Highmaps网页图表教程之图表配置项结构与商业授权

    Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...

随机推荐

  1. python练习笔记——计算1/1-1/3+1/5-1/7……的和

    1 / 1 - 1 / 3 + 1 / 5 - 1 / 7 + ....求100000个这样的分式计算之为是多少?将此值乘以4后打印出来,看看是什么? num_list = [] count = -1 ...

  2. 共享内存简介和mmap 函数

    一.共享内存简介 共享内存区是最快的IPC形式,这些进程间数据传递不再涉及到内核,换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据. 即每个进程地址空间都有一个共享存储器的映射区,当这块区 ...

  3. 采用dlopen、dlsym、dlclose加载动态链接库

    1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将各个业务已动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统 ...

  4. asp.net2.0导出pdf文件完美解决方案【转载】

    asp.net2.0导出pdf文件完美解决方案 作者:清清月儿 PDF简介:PDF(Portable Document Format)文件格式是Adobe公司开发的电子文件格式.这种文件格式与操作系统 ...

  5. activiti 开发环境

    1 javadocs 的11 个package org.activiti.engine,包含7个Service接口.异常定义.流程引擎.流程引擎配置和一些运行时异常类. org.activiti.en ...

  6. redis投票计数

    <?php /** * * 缓存利用测试,这里我们获取传过来的投票数据,每次加1,如果增加到了设定值,才将投票 * 次数写回mysql,这大大减轻了与mysql链接的开销,redis的使用由此可 ...

  7. vim:将<esc>映射为CapsLock键

    无语,大写锁定键基本不用,却占据这么重要的位置,凭啥?换了,搜了半天,决定用它uncap(https://github.com/susam/uncap) 一个开放源代码的小工具,就位踢走大写键而生地, ...

  8. 【Android】12.1 Intent基本概念

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Intent:意图,含义就是你想利用它调用哪个组件实现相关的功能,比如调用相机组件实现拍照.调用Contact组件 ...

  9. 【Android】3.23 示例23--瓦片图功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 地图SDK自v3.6.0起,新增瓦片图层(tileOverlay), 该图层支持开发者添加自有瓦片数 ...

  10. node-inspector调试报错问题处理

    使用node-inspector调试的时候,提示下面的异常,我的node版本是6.9.2出现下面的异常,我同事的版本4.2.1就没有这个问题. C:\Users\dzm>node-inspect ...