Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

工具提示

將鼠標懸停在一系列點上時，將顯示工具提示。默認情況下，工具提示顯示點的值和系列的名稱。

外觀

以下代碼示例顯示了工具提示的最常見外觀選項：

tooltip: {
    backgroundColor: '#FCFFC5',
    borderColor: 'black',
    borderRadius: 10,
    borderWidth: 3
}

也可以將背景色設置為漸變，

工具提示格式

工具提示的內容是從HTML的子集呈現的，可以通過多種方式對其進行更改，總而言之，可以使實現者完全控制內容。除了工具提示配置對象上的選項之外，您還可以設置各系列的選項，如何通過series.tooltip在工具提示中表示每個系列。 

• 可以使用tooltip.headerFormat更改工具提示的標題部分。在共享的工具提示中，使用了第一個系列的headerFormat。
• 每個系列的清單在tooltip.pointFormat選項中給出，或者為每個系列單獨的pointFormat給出。 
• 可以在tooltip.footerFormat選項中設置頁腳部分。
• 上面的所有選項都可以由tooltip.formatter回調覆蓋，以進行編程控制。

默認情況下，工具提示僅允許HTML的子集，因為HTML是使用SVG解析和呈現的。通過將useHTML選項設置為true，渲染器將切換為完整的HTML，從而允許在工具提示中使用表格布局或圖像。

tooltip: {
    formatter: function() {
        return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
    }
}

十字準線

十字線顯示一條線，將這些點與其相應的軸連接起來。在Highcharts中默認禁用十字準線，但在Highstock中默認啟用十字準線。

可以為x軸，y軸或兩者啟用十字線：

// Enable for x-axis only
tooltip: {
    crosshairs: [true]
}
// Enable for y-axis only
tooltip: {
    crosshairs: [false, true]
}
// Enable for both axes
tooltip: {
    crosshairs: [true,true]
}