# 標題（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中文網 | <a href='http://www.hcharts.cn' target='_blank'>中文教程</a>" } ``` #### 2、如何隱藏（不顯示）標題 **實現方法：** 設置標題文字為空即可 **實例：** ``` title :{ text:null } ``` * * * （正文完，最后更新時間：2015-06-10 11:09:59）