Highcharts翻譯系列之十六：tooltip工具提示
tooltip工具提示
參數
描述
默認值
animation
啟用或禁用提示的動畫。這對大數據量的圖表很有用
true
backgroundColor
提示的背景色或者漸變色
rgba(255 255, 255, 0.85)
borderColor
提示的邊框顏色
auto
borderRadius
邊框圓角的半徑
5.0
borderWidth
邊框的寬度
2.0
crosshairs
顯示十字線，把點和它們的軸值連接起來。十字線可以是Boolean,或者Boolean數組，或者是一個對象
null
enabled
啟用或禁用提示
true
footerFormat
附加到提示格式的字符串
null
formatter
回調函數用來格式化提示的文本
positioner
一個回調函數，用來在默認位置放置提示。
null
shadow
是否顯示提示的下降陰影
true
shared
當提示是共享的，整個繪圖區將捕獲鼠標的移動。所有序列類型的排序數據的提示文本將會顯示在一個氣泡（提示框）中。
false
snap
圖表或單個點的感應單元。不適合條狀圖、柱狀圖和餅圖切片。對於鼠標供電設備的默認值時10，對於觸摸設備的默認值時25。
null
style
提示的CSS樣式。
style: {color:'#333333',
fontSize: '9pt',
padding: '5px'}
useHTML
是否使用HTML代替SVG來渲染提示的內容
false
valueDecimals
每個序列的y值顯示多少小數位
保存所有小數
valuePrefix
附加到序列y值的前綴
null
valueSuffix
附加到序列y值的后綴
null
xDateFormat
如果x軸是時間軸，顯示在提示頭部的日期格式。
基於每個點的最小距離的大約數
highcharts方面的知識很多：
http://api.highcharts.com/highcharts
http://www.52wulian.org/highcharts_api/
現在來看看我們項目中的需求吧，先明白需求才能改進啊。
當你移動到一個數據點的時候，tooltip自動提示相應的信息。但是項目中需要異步獲取對此數據點的評論然后顯示。
實現需求的步驟：
（0）API文檔HighCharts結構如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
var chart =
new
Highcharts.Chart({
chart: {…}
// 配置chart圖表區
colors: [{...}]
// 配置主體顯示顏色（多個線條和柱體的顏色順序的）
credits: {…}
// 配置右下角版權鏈接
exporting: {…}
// 配置導出及打印
global: {…}
// HighCharts國際化方法調用
labels: {…}
// HTML標簽，可以放置在繪圖的任何位置
lang: {…}
// 語言對象屬性配
legend: {…}
// 配置圖例選項
loading: {…}
// 配置圖表加載選項
navigation: {…}
// 配置導出按鈕屬性
pane: {…}
// 僅適用於極性圖表和角儀表
plotOptions: {…}
// 配置數據點選項
series: [{...}]
// 配置數據列選項
subtitle: {…}
// 配置副標題
title: {…}
// 配置標題
tooltip: {…}
// 配置數據點提示框
xAxis: {…}
// 配置x軸選項
yAxis: {…}
// 配置y軸選項
})
|
（1）研究tooltip相應的屬性：
| 參數名 | 說明 | 默認值 |
|---|---|---|
| enable | 是否顯示提示框 | true |
| backgroundColor | 設置提示框的背景色 | “top” |
| borderColor | 提示框邊框顏色 | “auto” |
| borderRadius | 提示框圓角度/td> | 5 |
| style | css樣式 | style: { fontSize: ’9pt’, |
| formatter | 回調函數，用於格式化輸出提示框的顯示內容 返回的內容支持html標簽如：<b>, <strong>,<br/> |
主要的參數formatter：
|
1
2
3
4
|
formatter: function() {
return
'<b>'
+
this
.series.name +
'</b><br/>'
+
Highcharts.dateFormat(
'%Y-%m-%d'
,
this
.x) +
': '
+
this
.y ;
}
|
這就是tooltip提示信息的內容。那要是直接把異步獲取的信息的代碼直接加到其中不就行了？
獲取數據時異步的，tooltip中的formatter直接就返回值了，並沒有等待異步加載的數據。
（2）既然直接向tooltip增加內容不可以，可以自己寫一個div，然后顯示評論信息，div然后隨着數據點位置的改變而改變而改變位置。
highcharts的events只有click，mouseOver，mouseOut事件。
步驟：
（3）首先自己寫個div
<div id="reporting"></div>
（4）div的樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<style>
#reporting {
position: absolute;
top: 35px;
right: 20px;
text-align:left;
border:1px solid #c7bf93;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:6px 8px;
min-width:50px;
max-width:225px;
color:#
000
;
}
</style>
|
（5）重寫 mouseOver（主要就是獲取數據，並且顯示）， mouseOut（隱藏div）事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
mouseOver: function() {
var itemPriceId2 = map1.get(
this
.series.name);
var pointer =
this
;
//var tooltip = pointer.series.tooltipPoints;
$.post(
"<%=request.getContextPath()%>/calculator/listJsonCalComment.action"
,
{itemid :itemPriceId2,type:
'2'
, dataDate : Highcharts.dateFormat(
'%Y-%m-%d'
,
this
.x) },
function(data){
$(
"#reporting"
).html(data);
var left = pointer.plotX-
110
;
if
(left <
0
){
left =
0
;
}
$(
"#reporting"
).css(
"left"
,left +
"px"
);
$(
"#reporting"
).css(
"top"
,pointer.plotY+
75
+
"px"
);
$(
"#reporting"
).show();
},
'html'
);
},
mouseOut: function() {
$(
"#reporting"
).hide();
}
|
注意：后獲取數據點位置的時候，廢了很大的勁，這方面的資料很少，只能自己研究highcharts的源碼。
pointer.x是x軸的值，pointer.y是y軸的值,和位置並沒有任何關系。
pointer.plotX，pointer.plotY是數據點的位置。本來一開始想獲取tooltip的位置，搞了半天發現tooltip相應信息保存到tooltipPoints數組中，tooltipPoints是一個對象，里面保存了每一個數據點的tooltip提示信息的屬性。難點是還需要研究index值是怎么來的，獲取數據點相應的tooltip在tooltipPoints索引。
（6）默認的div隱藏
|
1
2
3
4
|
$(document).ready(function() {
//首先隱藏評論信息的顯示區
$(
"#reporting"
).hide();
}）；
|
好了，現在看看樣子吧：
