數據提示框（Tooltip） · Highcharts 中文教程

# 數據提示框（Tooltip）數據提示框指的當鼠標懸停在某點上時，以框的形式提示該點的數據，比如該點的值，數據單位等。數據提示框內提示的信息完全可以通過格式化函數動態指定；通過設置 `tooltip.enabled = false` 即可不啟用提示框。 ![](https://box.kancloud.cn/2016-05-04_572991b837367.png) ### 一、提示框外觀下面的實例代碼給出了關于數據提示框的外觀的常用配置 ``` tooltip: { backgroundColor: '#FCFFC5', // 背景顏色 borderColor: 'black', // 邊框顏色 borderRadius: 10, // 邊框圓角 borderWidth: 3, // 邊框寬度 shadow: ture, // 是否顯示陰影 animation: true // 是否啟用動畫效果 style: { // 文字內容相關樣式 color: "#ff0000", fontSize: "12px", fontWeight: "blod", fontFamily: "Courir new" } } ``` 提示：背景顏色也可以設置為漸變色 [在線試一試](http://code.hcharts.cn/highcharts/hhhhG0) ### 二、提示框內容數據提示框的目的是為了展示數據點相關的數據，具體展示的內容完全可以通過多種靈活的方式來實現。 #### 1、格式化函數 ##### formatter 數據提示框格式化函數，功能最強大也是最靈活的方法，函數里 `this` 關鍵字代表著當前數據點對象，常用的變量有： * this.x ：當前點 X 值 * this.y / this.point[i].y ：當前點的 Y 指 / 當前第 i 個點的 Y 值（tooltip 共享的情況下，關于共享見下方說明） * this.point / this.point[i] ：當前點 / 當前第 i 個點（tooltip 共享的情況下） * this.series / this.point[i].series ：當前數據列 / 當前第 i 個點的數據列（tooltip共享） * this.total * this.percentage 所有的可用屬性可以通過 `console.log(this)` 來查看 _小技巧_：通過 console.log() 可以很清楚的看到對象中的所有屬性及值，這在調試的時候非常好用。 ##### pointFormatter 數據提示框中單個點的格式化函數。默認是： ``` pointFormatter: function() { return 'u25CF {'+ this.series.name+'}: {'+this.y+'} .' } ``` #### 2、格式化字符串格式化字符串是格式化函數的簡化版，是一種利用特殊符號加變量字符的形式來代替函數的表達式。 ##### headerFormat 數據提示框頭部格式化字符，默認是： ``` {point.key} ``` ##### pointFormat 單個點的格式化字符串，實現的內容同 pointFormatter，默認實現是： ``` u25CF {series.name}: {point.y} . ``` 對比下 pointFormatter 和 pointFormat 我們可以知道兩兩種方式的差別： * pointFormat 更簡單，適用于簡單的內容格式化 * pointFormatter 更靈活，適用于相對復雜的自定義內容上述兩個觀點也就是格式化函數和格式化字符串的優缺點，在使用的時候，請靈活運用。 #### 3、時間格式化在時間圖表中，很常見的一個需求是時間的格式化顯示，在數據提示框中，我們可以通過時間格式化來統一時間的顯示。 ##### dateTimeLabelFormats 數據框中的時間點的格式化，默認實現是： ``` { millisecond:"%A, %b %e, %H:%M:%S.%L", second:"%A, %b %e, %H:%M:%S", minute:"%A, %b %e, %H:%M", hour:"%A, %b %e, %H:%M", day:"%A, %b %e, %Y", week:"Week from %A, %b %e, %Y", month:"%B %Y", year:"%Y" } ``` 關于時間格式化中字符的 ##### xDateFormat 數據提示框頭部時間格式化字符串。 [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhqg) #### 4、html 內容數據提示框默認（在沒開啟支持 HTML 模式的情況下）支持少量的 HTML 標簽，包括 ``、` ` 、``、``、``、` `、``，標簽的內容可以通過 style 屬性來指定，不過僅限文字相關的 CSS 樣式屬性。通過設置 `tooltip.useHTML = true` 可以開啟 HTML 模式，即可以用純 HTML 內容來渲染數據提示框（默認是以 SVG 渲染）。開啟 HTML 模式后，就可以給提示框添加鏈接、圖片、表格等 HTML 元素，給提示框添加表格的示例代碼是： ``` tooltip: { shared: true, useHTML: true, headerFormat: '{point.key}<table>', pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right">{point.y} EUR</td></tr>', footerFormat: '</table>', valueDecimals: 2 } ``` [在線試一試](http://code.hcharts.cn/highcharts/hhhhG1) #### 5、值的前綴、后綴及小數點在展現數據信息是，我們經常會給數據添加一些修飾信息，例如數據單位。highcharts 提供了 valuePrefix、valueSuffix 來給數據添加前綴及后綴。 ``` tooltip: { valuePrefix: '￥', valueSuffix: '元' } ``` 另外，對于小數點的處理，可以通過 valueDecimals 來指定保留小數位數（當然可以通過格式化函數來進行更復雜的處理）。 [在線試一試](http://code.hcharts.cn/highcharts/hhhhTG) 對于多個數據列數據提示框添加后綴時，一般是將屬性分別配置在數據列中，實例： ``` series: [{ name: 'Rainfall', type: 'column', yAxis: 1, data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], tooltip: { valueSuffix: ' mm' } }, { name: 'Temperature', type: 'spline', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], tooltip: { valueSuffix: '°C' } }] ``` [在線試一試](http://code.hcharts.cn/demos/hhhhDW) #### 6、多個數據列共用一個提示框（Shared）多個數據列的圖表中，常常需要對多個數據列的數據做對比，將多個數據列的相同分類同時展示在數據提示框中也是非常常見的需求，Highchart 中， `tooltip.shared` 的作用就是將多個數據分享到同一個數據提示框中，也就是多個數據共用的數據提示框。 [在線試一試](http://code.hcharts.cn/demos/hhhhxW) ### 三、其他特性 #### 1、十字準星 crosshairs 有三種配置形式，最基礎的是設置 crosshairs = true 表示啟用豎直方向準星線，三種設置方式是： ``` crosshairs: true // 啟用豎直方向準星線 ``` ``` crosshairs: [true, true] // 同時啟用豎直及水平準星線 ``` ``` crosshairs: [{ // 設置準星線樣式 width: 3, color: 'green' }, { width: 1, color: "#006cee", dashStyle: 'longdashdot', zIndex: 100 }] ``` ![](https://box.kancloud.cn/2016-05-04_572991b856b4d.png) [在線試一試](http://code.hcharts.cn/highcharts/hhhhGg) #### 2、固定位置顯示提示框通過配置 `tooltip.positioner` 可以讓數據提示框以固定位置顯示，實例如下 ``` positioner: function() { return { x: 60, y: 80 } } ``` 其中 x 表示相對圖表右上角水平偏移，y 為豎直方向的偏移。 ![](https://box.kancloud.cn/2016-05-04_572991b86fe52.png) [在線試一試](http://code.hcharts.cn/hcharts.cn/hhhhqc) #### 3、鼠標行為 * [stickyTracking](http://www.hcharts.cn/api/index.php#plotOptions.series.stickyTracking)：設置提示框觸發模式，默認是鼠標在點的附近就觸發提示框，設置 false 后只有鼠標劃過點才觸發 * hideDelay：提示框隱藏延遲時間 ### 四、常見問題 #### 1、提示框亂碼了怎么辦？通過上面的學習我們知道，數據點的默認格式化內容是： ``` u25CF {series.name}: {point.y} . ``` 其中的 “\u25CF” 是一個 Unicode 碼，也是導致亂碼的根源，最簡單的解決辦法有兩種： 1）將你的頁面編碼設置 UTF-8 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> // 設置網頁編碼 </head> // ... 省略代碼 ``` 2）重寫提示框數據點格式化函數或格式化字符串，例如將 pointFormat 重寫為： ``` {series.name}: {point.y} . ``` #### 2、提示框被文字標簽覆蓋了怎么辦？ #### 3、如何在外部觸發提示框？見：[論壇帖子](http://bbs.hcharts.cn/thread-773-1-1.html) 即調用 `chart.tooltip.refresh()` 函數實現（內部沒有公開函數，通過研究源碼才知道這個函數的，研究源碼非常有意義！） * * * （正文完，最后更新時間：2015-06-09 20:46:02）