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

【问题标题】：Highcharts load data with ajax to populate the tooltipHighcharts 使用 ajax 加载数据以填充工具提示
【发布时间】：2014-10-06 21:35:23
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery highcharts

【解决方案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。

【讨论】：

thx，如果我将鼠标移到一个点上并移动到另一个点并再次返回，则解决方案 2 和 3 不起作用。两者都给出了错误的解决方案...关于 1 我必须考虑那个..
@Janis，是的，这就是我提到可能的“竞争条件”的原因。由于这都是异步的，因此您需要管理调用。这是一个更强大的实现：plnkr.co/edit/XkuseNgYXx8pJHrpdnzF?p=preview
你的最后一次更新确实完成了这项工作。这就是解决市场问题的原因

【解决方案2】：

马克给了我正确的解决方案，这就是我推销它的原因..

如果您想在此处的工具提示中显示 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..";


            }
        }

【讨论】：