软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> ?网页图表Highcharts实践教程标之添加题副标题版权信息 -> 正文阅读

[Web前端]?网页图表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-1title】修改实例1-1的源代码如下:

  •                 chart: {

  •                     type: 'line'

  •                 },

  •                 subtitle: {

  •                     text:''

  •                 },

  •                 series: [{

  •                     name: '最高温度',

  •                     data: [7, 11, 8, 7, 9, 9, 9]

  •                 }]

执行代码,运行结果如图3.1所示。虽然在代码中没有设置title组件,但图表仍然显示一个默认标题,标题内容为Chart title。同时,虽然设置副标题subtitle,但标题内容为空,所以没有副标题。
 [img]http://img.blog.csdn.net/20150610134914137?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
3.1  修改后的图表

Highcharts标题的样式


标题的内容为文本形式。Highcharts默认对一些基本HTML标签提供支持,如<b><br/><em><i><strong>。在文本中可以直接使用这几个基本标签。
【实例3-2titletext】为实例1-1的标题加粗,修改代码如下:

  •                 title: {

  •                     text: '<b>北京一周最高温度</b>'                                  //使用加粗标签

  •                 },

执行后,效果如图3.2所示。从图中可以明显看出,标题被加粗了。
[img]http://img.blog.csdn.net/20150610134927220?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.2  加粗的标题
虽然这五个标签功能常用,但是功能有限。为了扩展功能,titlesubtitle都提供以下两种方式。
1.HTML渲染useHTML
设置配置项useHTML后,可以允许在标题文本中使用其他HTML标签。其语法如下:

  • useHTML:Boolean

其中,参数Boolean为布尔值,可以为truefalse。默认值为false,表示不支持使用其他的HTML标签。
2.设置标题样式style
用户也可以指定标题文本所使用的CSS样式。其语法形式如下:

  • style:CSSObject

其中,参数CSSOjbectCSS样式对象。默认值为{"color": "#555555" }

Highcharts标题的布局方式


由于标题位于图表区内部,往往还在绘图区的上面。所以,标题的布局依赖于这两者。下面详细讲解标题的布局方式。
1.标题相对图表区的布局
由于标题区在图表区内部,所以标题可以以图表区作为标准,进行对齐。这时,需要使用title/subtitle配置项alignverticalAlign。其语法如下所示:

  • align:String1

  • verticalAlign:String2

其中,参数String1表示水平对齐方式,值包括leftcenterright,默认值为center;参数String2表示垂直对齐方式,值包括topmiddlebottom
【实例3-3titlealign】设置实例1-1的标题在左下角显示。修改代码如下:

  •                 title: {

  •                     text: '北京一周最高温度',

  •                     align: 'left',                                          //设置水平左对齐

  •                     verticalAlign:'bottom'                      //设置垂直底对齐

  •                 },

执行后,效果如图3.3所示。
[img]http://img.blog.csdn.net/20150610134938585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.3  设置标题的对齐方式
2.标题相对绘图区的布局
标题和绘图区都位于绘图区内部,标题可以浮动在绘图区上,也可以不浮动。用户可以通过配置项floating设置是否浮动。其语法如下:

  • floating:Boolean

其中,参数Boolean的值包括truefalse。默认值为false
【实例3-4titlefloating】设置实例1-1的标题为浮动方式,修改代码如下:

  •                 title: {

  •                     text: '北京一周最高温度',

  •                     floating:true                                        //设置浮动方式

  •                 },

执行代码,效果如图3.4所示。从图中可以看到,标题进入了绘图区中。
[img]http://img.blog.csdn.net/20150610134949264?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.4  设置标题的浮动方式
如果设置了配置项verticalAlign的值,默认启用浮动方式。subtitle也可以设置浮动方式。如果图表同时包含标题和副标题,建议两者浮动方式统一,并且只在title中设置。否则,会造成两个标题重合。当标题不设置浮动,可以通过配置项margin设置标题和绘图区的间距。其语法如下:

  • margin:Number

其中,参数Number表示标题和绘图区的间距,单位是px。默认值为15。如果存在副标题,则间距为Number+15
【实例3-5titlemargin】下面将实例1-1中的标题和绘图区间距进行修改,修改代码如下:

  •                 title: {

  •                     text: '北京一周最高温度',

  •                     margin: 100                                                           //设置间距为100

  •                 },

  •                 subtitle: {

  •                     text: '2015.02.08--2015.02.14'

  •                 },

执行后,效果如图3.5所示。从图中可以看出,标题距离绘图区的距离是100px+15px。其中,15px是副标题和绘图区的默认间距。
[img]http://img.blog.csdn.net/20150610134959666?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.5  设置标题和绘图区间距
3.标题的偏移位置
除了使用alignverticalAlign对齐外,标题和副标题还可以基于对齐方式进行进一步的偏移。这一点与重置按钮resetZoomButton类似。它也通过横向偏移配置项x和纵向偏移配置项y实现。其语法如下:

  • x:Number1

  • y:Number2

其中,参数Number1表示横行偏移距离的值,单位为px,默认值为0;参数Number2表示纵向偏移距离的值,单位为px
【实例3-6titlexy】下面将实例1-1的标题位置进行偏移,修改代码如下:

  •                 title: {

  •                     text: '北京一周最高温度',

  •                     align: 'left',                                          //设置横向对齐方式

  •                     x:100                                                    //设置横向偏移距离

  •                 },

执行后,效果如图3.6所示。为了方便观察偏移位置,这里设置显示图表边框线。图表区与内部的图表元素本来左侧默认有10px的间隔。设置标题横向左对齐后,并设置偏移100px后,标题距离图表区的左边框距离为100+10=110px
[img]http://img.blog.csdn.net/20150610135009723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.6  标题的偏移位置
由于副标题的设置效果与标题的设置效果等同,这里不再讲解。

Highcharts版权信息


版权信息可以帮助浏览者明确信息发布者和权利所属者。通常版权信息为与右下角。我们前面实例中右下角,都有Highcharts.com的版权信息比较,如图3.7所示。
[img]http://img.blog.csdn.net/20150610135019673?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.7  版权信息
Highcharts图表的版权信息是由组件credits实现的。其语法如下:

  • credits: {

  •     //配置项

  • }

下面讲解常见的版权信息配置项。

Highcharts启用版权信息


默认情况下,显示版权信息功能是开启的。但很多时候,为了节省图表空间,需要禁用该功能。这时需要使用设置配置项enable。其语法如下:

  • enabled: Boolean

其中,enabled的值类型为布尔类型。如果值为true,则显示版权信息;如果为false,则不显示版权信息。默认值为true。如果要禁用该功能,只需要将该配置项的值设置为false即可。
【实例3-7creditsenabled】下面禁止图表的版权信息显示。修改代码如下:

  •                 credits: {

  •                     enabled:false                                               //禁止显示版权信息

  •                 }

Highcharts设置版权信息内容


默认图表中的版权信息内容是Highcharts.com,而单击后,会跳转到Highcharts的官网http://www.highcharts.com/。对于开发者来说,这都是需要修改。用户可以通过配置项texthref来指定自己需要的版权信息。其语法如下:

  • text: String1

  • href: String2

其中,参数String1指定版权信息的文本内容,默认值为Highcharts.com;参数String2指定版权信息的超链接网址,默认值为http://www.highcharts.com/
【实例3-8textandhref】下面修改图表默认的版权信息,修改代码如下:

  •                 credits: {

  •                     text: '大学霸',                                                        //设置版权信息文本

  •                     href:'http://daxueba.net'                           //设置版权信息的超链接

  •                 }

执行后,运行结果如图3.8所示。从图中看到,版权信息已经修改为代码所设置的信息了。
[img]http://img.blog.csdn.net/20150610135030335?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

3.8  定制版权信息

Highcharts设置版权信息位置和样式


除了能设置版权信息内容外,用户还可以设置版权信息显示的位置和各种样式。这时,需要使用配置项positionsytle。其语法如下:

  • position: Object

  • style: CSSObject

其中,参数Object指定版权信息显示的位置信息,可以包含的项如下:
q  align:表示水平对齐方式,值可以为leftcenterright。默认值为right
q  verticalAlign:表示垂直对齐方式,值可以为topcenterbottom。默认值为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人!


......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2015-06-12 15:22:39  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-7-22 4:48:33
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --