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

Question

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

这个例子有效.它获取数据.问题是工具提示.当显示工具提示时,它将在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 

Answer 1

三种解决方案

1.)忘记AJAX调用.您只需在页面加载时将所有"工具提示"数据缓存在内存中,然后使用formatter函数加载它.

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;
 }

这里的例子.

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...";
  }

这里的例子.