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

Highcharts load data with ajax to populate the tooltip

本文关键字：填充 工具提示 数据 加载 使用 ajax Highcharts      更新时间：2023-09-26

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

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

三种解决方案：

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

此处为示例。

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

此处为示例。

Mark给我正确的解决方案，这就是我推销它的原因。

如果你想在这个的工具提示中显示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..";

            }
        }
相关文章：