作者：highcharts | 时间：2013-9-30 13:50:22 | [小  大] | 来源：highcharts | 

阅读：12122 | 

  ： 2 |  收藏 highcharts，图表，入门，高级，formatter，tooltip，ajax，格式化，回调函数，自定义   [摘要]： 今天有个highcharts的使用者，也是本群的屌丝用户?meiye1988，提出了一个关于highcharts图表的tooltip内可以可否显示非数据点的其他数据的问题。这个问题其实很多朋友可能不太明白，对于格式化的回调函数来说，我们是可以编写自己的js方法的，然后在js方法内编写ajax异步获取数据，以此来达到丰富tooltip提示信息的目的。 完整的Demo代码如下所示： $(function () { $('#container').highcharts({ chart: { }, tooltip: { formatter: function() { ...

完整的Demo代码如下所示：

$(function () { $('#container').highcharts({ chart: { }, tooltip: { formatter: function() { //可以在js方法内调用ajax方法然后return任何html格式数据 return getData(this.series.name); } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4] }] }); }); //自己编写的js方法 function getData(legendName) { var val = "<b>"+legendName+"</d>"; val += "<br/>我成功啦!" //可以编写ajax异步获取数据，比如总数等 或者其他的数据信息 return val; }

我们可以在getData()方法内编写ajax方法异步获取数据，然后总体return即可。

心动不如行动，动手吧！

highcharts，图表，入门，高级，formatter，tooltip，ajax，格式化，回调函数，自定义    本文为原创型文章转载请尊重他人劳动成果并注明出处：?615  可以扫描本站该博客文章的QR二维码进行访问