AJax技术

highcharts图表高级入门之Tooltip:如何在Tooltip的格式化回调

字号+ 作者:H5之家 来源:H5之家 2017-01-13 12:00 我要评论( )

今天有个highcharts的使用者,也是本群的屌丝用户http://www.stepday.com/my.stepday/?meiye1988,提出了一个关于highcharts图表的tooltip内可以可否显示非数据

作者: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二维码进行访问  

本站该博客文章的QR二维码

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评