六、基礎教程-標題(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
}