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调用。你只需要缓存所有＆＃34;工具提示＆＃34;页面加载内存中的数据并使用格式化程序函数加载它。

2。）您在格式化程序中同步进行AJAX调用。这将拖延工具提示弹出（并且它将是＆＃34;生涩＆＃34;）：

 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。

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


            }
        }

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

2 个答案: