软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
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 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年11日历
2017-11-19 0:00:31
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --