标题（Title）
最后更新于：2022-04-01 22:26:08
# 标题（Title）
标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。设置标题和副标题的示例代码如下：
```
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 |
更多关于标题的属性请参考API文档：**[title](http://www.hcharts.cn/api/index.php#title)**
### 二、动态设置和获取标题
#### 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
```
[在线试一试](http://code.hcharts.cn/hcharts.cn/hhhhWG)
### 三、关于标题的常见问题
#### 1、如何在标题中添加链接
**实现方法：**
设置useHTML为true，然后在标题文字中加入a标签
**实例：**
```
title :{
useHTML:true,
text:"Highcharts中文网 | 中文教程"
}
```
#### 2、如何隐藏（不显示）标题
**实现方法：**
设置标题文字为空即可
**实例：**
```
title :{
text:null
}
```
* * *
（正文完，最后更新时间：2015-06-10 11:09:59）
';