Highcharts使用ajax加載數據以填充工具提示

我瞭解如何將日期加載到圖表。但現在我想用額外的數據填充工具提示。Highcharts使用ajax加載數據以填充工具提示

此示例適用。它獲取數據。問題是工具提示。當顯示工具提示時，它會在Ajax調用之前顯示它自己。所以你永遠不會看到Ajax調用的輸出。

我以爲我把它放在一個div id =「test2」，當Ajax完成它填充數據的div。 Highcharts不顯示div，它顯示沒有id的跨度。

這個想法是：你有一個有日子的圖表，並計數它們。如果您將鼠標懸停在某一點上，您將看到當天所有點...

如何動態地向工具提示添加額外數據？

json data: 
{"dagen":{"dagen":["2014-09-19 09:44:15","2014-09-19 22:35:06"],"aantal":["09:44","10:35"]}} 



tooltip: { 

    formatter: function() { 
      var d ='<b>'+ this.series.name +'</b><br/>'+ 
      this.y +'<br/><br /><div id="test2">ddd</div>'; 

       console.log('a'); 
      jQuery.getJSON("getdata.php?dateParam="+this.x, function(json) 
       { 
         console.log('c'); 
         var timearray = []; 
             jQuery.each(json.dagen.dagen, function(i,times){ 
              timearray += times; 
             }); 

         console.log(timearray); 

         b = timearray; 
         //jQuery('#test2').html(timearray); 
       }); 


        console.log('b'); 
        return d; 


    } 
}, 


console out put: 
a 
b 
c 
2014-09-19 09:44:152014-09-19 22:35:06

來源

2014-10-06 Janis

三種解決方案：

1）忘記AJAX調用。您只需在頁面加載中將所有「工具提示」數據緩存在內存中，並使用格式化程序功能加載它。

2.）您在格式化程序中同步AJAX調用。這將失速從彈出的提示（這將是「幹」）：

formatter: function() { 
    var rV = null; 
    $.ajax({ 
     dataType: "json", 
     url: 'ajax.json', 
     async: false, // this will stall the tooltip 
     success: function(ajax){ 
     rV = ajax.someProperty; 
     } 
    }); 
    return rV; 
}

例here。 3.您保持ajax異步，在工具提示中顯示Loading，然後在ajax調用完成後操作工具提示。注意這一點，你會在ajax調用中遇到競爭情況，並且可能會爲工具提示取回錯誤的數據。

formatter: function() { 
    $.getJSON('ajax.json', function(ajax){ 
     var tt = Highcharts.charts[0].tooltip; 
     var label = tt.label.element.lastChild; // find contents of tooltip 
     $(label).text(ajax.someProperty); 
    }); 
    return "...Loading..."; 
    }

示例here。

來源

2014-10-07 16:16:42 Mark

THX，如果我提出我的鼠標點並移動到另一點，然後再返回解決方案2和3不工作。都給出了錯誤的解決方案... ...大約1我必須考慮那個.. – Janis 2014-10-07 17:58:49

@Janis，是的，這就是爲什麼我提到可能的「競爭條件」。由於這是全部異步，所以您需要管理呼叫。這是一個更強大的實施：http://plnkr.co/edit/XkuseNgYXx8pJHrpdnzF?p=preview – Mark 2014-10-07 18:55:10

你最近的更新確實做了這項工作..這就是爲什麼市場解決 – Janis 2014-10-13 15:11:59

馬克給我正確的解決方案這就是爲什麼我場吧..

如果提示你想顯示HTML在這個

useHTML: true,

這是我的解決方案。我用DATAFORMAT，因爲我切換到UTC時間戳記

tooltip: { 
      useHTML: true, 
      formatter: function() { 
       var msg ="<span>"+Highcharts.dateFormat('%A , %d %b', this.x)+'</span><br/>'; 
       msg = msg +"<b> Totaal: </b>" + this.y +'<br/><br />'; 
       msg = msg +'<table><body >'; 
       var msgEnd= '</body></table>'; 


         console.log('a'); 
        jQuery.getJSON("getdatachar.php?datedetailParam="+Highcharts.dateFormat('%Y-%m-%d', this.x), function(json) 
         { 
           console.log('c'); 
           var timearray = ""; 
           jQuery.each(json.dagen.dagen, function(i,times){ 
            timearray = timearray + '<tr><td>'+times+ '</td></tr>'; 
           }); 
           console.log(timearray); 

           chart.tooltip.label.textSetter(msg+timeArray+msgEnd); 
         }); 


          console.log('b'); 

        return "Loading.."; 


      } 
     }

來源

2014-10-13 15:23:03 Janis

Highcharts使用ajax加載數據以填充工具提示

回答

相關問題