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

一、提示框外觀

下面的實例代碼給出了關于數據提示框的外觀的常用配置

tooltip: {
    backgroundColor: '#FCFFC5',   // 背景顏色
    borderColor: 'black',         // 邊框顏色
    borderRadius: 10,             // 邊框圓角
    borderWidth: 3,               // 邊框寬度
    shadow: ture,                 // 是否顯示陰影
    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

所有的可用屬性可以通過 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"
}

數據提示框默認（在沒開啟支持 HTML 模式的情況下）支持少量的 HTML 標簽， 標簽的內容可以通過 style 屬性來指定，不過僅限文字相關的 CSS 樣式屬性。

通過設置tooltip.useHTML = true可以開啟 HTML 模式，即可以用純 HTML 內容來渲染數據提示框（默認是以 SVG 渲染）。

開啟 HTML 模式后，就可以給提示框添加 鏈接、圖片、表格等 HTML 元素，給提示框添加表格的示例代碼是：

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、十字準星

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：提示框隱藏延遲時間

Via：hcharts.cn

點擊下載最新版 Highcharts

如果你想提供任何產品反饋，。

購買最新版Highcharts<>，即可擁有最新正版授權!