六、基础教程-标题(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

二、动态设置和获取标题

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

三、常见问题

1. 如何在标题中添加链接

实现方法：
设置 useHTML为 true，然后在标题文字中加入 a 标签
实例：

title :{
    useHTML:true,
    text: "Highcharts中文网 | <a href='https://www.hcharts.cn' target='_blank'>中文教程</a>" 
}

2. 如何隐藏（不显示）标题

实现方法：
设置标题文字为空即可
实例：

title :{
    text:null
}