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加载数据以填充工具提示

回答

相关问题