十、基礎教程-數據提示框（Tooltip）

數據提示框指的當鼠標懸停在某點上時，以框的形式提示該點的數據，比如該點的值、數據單位等。數據提示框內提示的信息完全可以通過格式化函數動態指定；通過設置 tooltip.enabled = false 即可不啓用提示框。

一、提示框外觀

tooltip: {
    backgroundColor: '#FCFFC5',   // 背景顏色
    borderColor: 'black',         // 邊框顏色
    borderRadius: 10,             // 邊框圓角
    borderWidth: 3,               // 邊框寬度
    shadow: true,                 // 是否顯示陰影
    animation: true               // 是否啓用動畫效果
    style: {                      // 文字內容相關樣式
        color: "#ff0000",
        fontSize: "12px",
        fontWeight: "blod",
        fontFamily: "Courir new"
    }
}

二、提示框內容

數據提示框的目的是爲了展示數據點相關的數據，具體展示的內容完全可以通過多種靈活的方式來實現。

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

pointFormatter
數據提示框中單個點的格式化函數。默認是：

pointFormatter: function() {
    return '<span style="color:{'+this.series.color+'}">u25CF</span> {'+
           this.series.name+'}: <b>{'+this.y+'}</b><br/>.'
}

2、格式化字符串

格式化字符串是格式化函數的簡化版，是一種利用特殊符號加變量字符的形式來代替函數的表達式。
headerFormat
數據提示框頭部格式化字符，默認是：

<span style="font-size: 10px">{point.key}</span><br/>

pointFormat
單個點的格式化字符串，實現的內容同 pointFormatter，默認實現是：

<span style="color:{series.color}">u25CF</span> {series.name}: <b>{point.y}</b><br/>.

對比下 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
數據提示框頭部時間格式化字符串。

4. html 內容

數據提示框默認（在沒開啓支持 HTML 模式的情況下）支持少量的 HTML 標籤，包括 <b>、<i>、<br> 、<strong>、<em>、<span>，標籤的內容可以通過 style 屬性來指定，不過僅限文字相關的 CSS 樣式屬性。
通過設置 tooltip.useHTML = true 可以開啓 HTML 模式，即可以用純 HTML 內容來渲染數據提示框（默認是以 SVG 渲染）。
開啓 HTML 模式後，就可以給提示框添加 鏈接、圖片、表格等 HTML 元素，給提示框添加表格的示例代碼是：

tooltip: {
    shared: true,
    useHTML: true,
    headerFormat: '<small>{point.key}</small><table>',
    pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
        '<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2
}

5. 值的前綴、後綴及小數點

在展現數據信息時，我們經常會給數據添加一些修飾信息，例如數據單位。highcharts 提供了 valuePrefix、valueSuffix 來給數據添加前綴及後綴。

tooltip: {
    valuePrefix: '￥',
    valueSuffix: '元'
}

另外，對於小數點的處理，可以通過 valueDecimals 來指定保留小數位數（當然可以通過格式化函數來進行更復雜的處理）。
對於多個數據列數據提示框添加後綴時，一般是將屬性分別配置在數據列中，實例：

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'
    }
}]

6、共享的提示框（Shared）

多個數據列的圖表中，常常需要對多個數據列的數據做對比，將多個數據列的相同分類同時展示在數據提示框中也是非常常見的需求，Highchart 中， tooltip.shared 的作用就是將多個數據分享到同一個數據提示框中，也就是多個數據共用的數據提示框。

三、其他特性

1. 十字準星

注：在 Highcharts 5.0.0 後十字準星線相關的配置移至座標軸下面了，使用方法同之前的配置，爲了兼容之前版本，我們繼續保留提示框下的十字準星配置，更多詳情參考 [API 文檔](https://api.hcharts.cn/highcharts#xAxis.crosshair)

crosshairs 有三種配置形式，最基礎的是設置 crosshairs = true 表示啓用豎直方向準星線，三種設置方式是：

crosshairs: true          // 啓用豎直方向準星線

crosshairs: [true, true]  // 同時啓用豎直及水平準星線

crosshairs: [{            // 設置準星線樣式
    width: 3,
    color: 'green'
}, {
    width: 1,
    color: "#006cee",
    dashStyle: 'longdashdot',
    zIndex: 100 
}]

2、固定位置顯示提示框

通過配置 tooltip.positioner 可以讓數據提示框以固定位置顯示，實例如下

positioner: function() {
    return {
        x: 60,
        y: 80
    }
} 

其中 x 表示相對圖表右上角水平偏移，y 爲豎直方向的偏移。

3、鼠標行爲

 - stickyTracking：設置提示框觸發模式，默認是鼠標在點的附近就觸發提示框，設置 false 後只有鼠標劃過點才觸發
 - hideDelay：提示框隱藏延遲時間

四、常見問題

1、提示框亂碼了怎麼辦？

通過上面的學習我們知道，數據點的默認格式化內容是：

<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>.

1）將你的頁面編碼設置 UTF-8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    // 設置網頁編碼
</head>
// ... 省略代碼 

2) 重寫提示框數據點格式化函數或格式化字符串，例如將 pointFormat 重寫爲：

<span style="color:{series.color}"></span> {series.name}: <b>{point.y}</b><br/>.

2、如何在外部觸發提示框？

即調用 chart.tooltip.refresh() 函數實現

3. 提示框內容被遮擋了？

當設置了文字標籤以 HTML 的形式渲染（即設置 useHTML = true ）後，該標籤會覆蓋提示框裏的文字，詳細可參看 帖子 及 例子
問題產生的原因
HTML 渲染是獨立於整個圖表的 svg 標籤外的，其層疊值（zIndex）大於圖表（及圖表裏的元素，包括提示框）的層疊值，所以就會導致提示框內容被覆蓋。
解決辦法
    將提示框的渲染模式也設置爲 HTML模式，並將其層疊值調整到比覆蓋的內容大，具體的解決方案參考 例子