highcharts擴展tooltip提示異步信息

本人博客開始遷移，博客整個架構本身搭建及編碼 http://www.cookqq.com

highcharts方面的知識不少：

http://api.highcharts.com/highcharts

http://www.highcharts.com/

http://www.52wulian.org/highcharts_api/

如今來看看咱們項目中的需求吧，先明白需求才能改進啊。

當你移動到一個數據點的時候，tooltip自動提示相應的信息。可是項目中須要異步獲取對此數據點的評論而後顯示。

實現需求的步驟：

（0）API文檔HighCharts結構以下

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: { color: ‘#333333′, fontSize: ’9pt’, padding: ’5px’}
formatter	回調函數，用於格式化輸出提示框的顯示內容 返回的內容支持html標籤如：<b>, <strong>,<br/>

主要的參數formatter：

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的樣式

<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;
background-color:#fff9c9;
}
</style>

（5）重寫 mouseOver（主要就是獲取數據，而且顯示），  mouseOut（隱藏div）事件

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隱藏

$(document).ready(function() {
    	//首先隱藏評論信息的顯示區
    	$("#reporting").hide();
}）；

好了，如今看看樣子吧：