我了解如何将日期加载到图表中。但现在我想用额外的数据填充工具提示。
这个例子很有效。它获取数据。问题出在工具提示上。当显示工具提示时,它将在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..";
}
}