Highcharts标题Title(二)
2015-09-23 16:27
141 查看
标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。设置标题和副标题的示例代码如下:
标题只有一些文字信息,所以标题的配置无非是一些定位、字体大小、颜色等的配置,常见属性如下表所示:
可以通过Highcharts对象获取标题内容,实例代码如下
Highcharts提供了
参数说明:
title : 标题对象
subtitle: 副标题对象
redraw:是否重绘,即设置标题后是否重新绘制图表,默认是false
实例说明:
上述方法不仅仅是设置标题的文字,有的时候我们可能只需要更改标题的样式,例如颜色、字号的,也可以通过该函数实现,示例代码如下
在线试一试
实现方法:
设置useHTML为true,然后在标题文字中加入a标签
实例:
实现方法:
设置标题文字为空即可
实例:
title: { text: '我是正标题' }, subtitle: { text: '我是副标题' }
标题只有一些文字信息,所以标题的配置无非是一些定位、字体大小、颜色等的配置,常见属性如下表所示:
属性名 | 描述 | 默认值 |
---|---|---|
text | 标题的文字 | "Chart title" |
align | 文字水平对齐方式,有left、center、right可选 | "center" |
verticalAlign | 文字垂直对齐方式,有top、middle、bottom可选 | "" |
useHTML | 是否解析html标签,设置解析后,可以使用例如a等html标签 | false |
floating | 是否浮动,设置浮动后,标题将不占用图表区位置 | false |
margin | 标题和图表区的间隔,当有副标题时,表示标题和副标题之间的间隔 | 15 |
style | 文字样式,可以设置文字颜色、字体、字号,注意和css有略微的不同,例如font-size用fontSize、font-family用fontFamily表示 | { color: '#3E576F', fontSize: '16px' } |
x | 相对于水平对齐的偏移量,可以是负数,单位是px | 0 |
y | 相对于垂直对齐的偏移量,可以使负数,单位是px | 0 |
二、动态设置和获取标题
1、获取标题内容
可以通过Highcharts对象获取标题内容,实例代码如下var chart = new Highcharts.Chart(options); // Highcharts构造函数 var title = chart.title.textStr; // 通过chart对象获取标题内容
2、动态设置标题
Highcharts提供了setTitle()函数供动态设置标题用,
setTitle()函数结构如下
setTitle (Object title, object subtitle, Boolean redraw)
参数说明:
title : 标题对象
subtitle: 副标题对象
redraw:是否重绘,即设置标题后是否重新绘制图表,默认是false
实例说明:
var title = { text:"我是新标题", style:{ color:"#ff0000" } }; var chart = new Highcharts.Chart(); chart.setTitle(title);
上述方法不仅仅是设置标题的文字,有的时候我们可能只需要更改标题的样式,例如颜色、字号的,也可以通过该函数实现,示例代码如下
var subtitle = { style:{ color:"#000", fontWeight:"bold" } }; var chart = new Highcharts.Chart(); chart.setTitle(null,subtitle); //设置副标题,第一个参数设置为null
在线试一试
三、关于标题的常见问题
1、如何在标题中添加链接
实现方法:设置useHTML为true,然后在标题文字中加入a标签
实例:
title :{ useHTML:true, text:"Highcharts中文网 | <a href='http://www.hcharts.cn' target='_blank'>中文教程</a>" }
2、如何隐藏(不显示)标题
实现方法:设置标题文字为空即可
实例:
title :{ text:null }
相关文章推荐
- layer-list实现只有左、右和下边框的圆角矩形
- bzoj3993[SDOI2015]星际战争
- 用Navicat_SSH 连接数据库服务器
- 前端常见BUG--js,及处理方法(持续更新)
- SQL to Mongo Shell to C++ ( 备忘 )
- 植物大战僵尸二:游戏界面的绘制
- 对block,单例模式的理解及使用
- Unity技巧2
- [网易笔试]Best Compression Algorithms
- 【.Net码农】 jquery访问ashx文件示例
- 句子相似度
- HDU 2531
- 一场大雨引发的思考
- 轻松搞定RabbitMQ(一)——RabbitMQ基础知识+HelloWorld
- 小米面试题目(测试开发岗位——不是测试,是测试工具和平台的开发岗位)
- do{...}while(0)的意义和用法
- 前端常见BUG--js,及处理方法(持续更新)
- 自己需要的日期格式
- IOS TableView实现省市联动
- 愛情世界裏沒有真正的幸福