javascript - Highcharts 使用 ajax 加载数据以填充工具提示

Question

我了解如何将日期加载到图表中。 但现在我想用额外的数据填充工具提示。

这个例子有效。它获取数据。 问题是工具提示。显示工具提示时，它会在 Ajax 调用之前自行显示。 所以您永远不会看到 Ajax 调用的输出。

我以为我在里面放了一个 div id="test2"，当 Ajax 完成时它用数据填充 div。 Highcharts 不显示 div ，它显示没有 id 的 span。

想法是:您有一个包含天数的图表，并以此为依据。如果将鼠标悬停在其中一个点上，您会看到当天那里的所有点...

如何向工具提示动态添加额外数据？

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 

Answer 1

三种解决方案:

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 .