Highchart ：tooltip工具提示

Highcharts翻译系列之十六：tooltip工具提示
tooltip工具提示

参数
 描述
 默认值
 
animation
 启用或禁用提示的动画。这对大数据量的图表很有用
 true
 
backgroundColor
 提示的背景色或者渐变色
 rgba(255 255,  255, 0.85)
 
borderColor
 提示的边框颜色
 auto
 
borderRadius
 边框圆角的半径
 5.0
 
borderWidth
 边框的宽度
 2.0
 
crosshairs
 显示十字线，把点和它们的轴值连接起来。十字线可以是Boolean,或者Boolean数组，或者是一个对象
 null
 
enabled
 启用或禁用提示
 true
 
footerFormat
 附加到提示格式的字符串
 null
 
formatter
 回调函数用来格式化提示的文本
 
 
positioner
 一个回调函数，用来在默认位置放置提示。
 null
 
shadow
 是否显示提示的下降阴影
 true
 
shared
 当提示是共享的，整个绘图区将捕获鼠标的移动。所有序列类型的排序数据的提示文本将会显示在一个气泡（提示框）中。
 false
 
snap
 图表或单个点的感应单元。不适合条状图、柱状图和饼图切片。对于鼠标供电设备的默认值时10，对于触摸设备的默认值时25。
 null
 
style
 提示的CSS样式。
 style: {color:'#333333',

fontSize: '9pt',

padding: '5px'}
 
useHTML
 是否使用HTML代替SVG来渲染提示的内容
 false
 
valueDecimals
 每个序列的y值显示多少小数位
 保存所有小数
 
valuePrefix
 附加到序列y值的前缀
 null
 
valueSuffix
 附加到序列y值的后缀
 null
 
xDateFormat
 如果x轴是时间轴，显示在提示头部的日期格式。
 基于每个点的最小距离的大约数

highcharts方面的知识很多：

http://api.highcharts.com/highcharts

http://www.highcharts.com/

http://www.52wulian.org/highcharts_api/

现在来看看我们项目中的需求吧，先明白需求才能改进啊。

当你移动到一个数据点的时候，tooltip自动提示相应的信息。但是项目中需要异步获取对此数据点的评论然后显示。

实现需求的步骤：

（0）API文档HighCharts结构如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

var chart = new Highcharts.Chart({     chart: {…}        // 配置chart图表区     colors: [{...}]    // 配置主体显示颜色（多个线条和柱体的颜色顺序的）     credits: {…}      // 配置右下角版权链接     exporting: {…}     // 配置导出及打印     global: {…}       // HighCharts国际化方法调用     labels: {…}       // HTML标签，可以放置在绘图的任何位置     lang: {…}           // 语言对象属性配     legend: {…}       // 配置图例选项     loading: {…}         // 配置图表加载选项     navigation: {…}   // 配置导出按钮属性     pane: {…}           // 仅适用于极性图表和角仪表     plotOptions: {…}  // 配置数据点选项     series: [{...}]   // 配置数据列选项     subtitle: {…}     // 配置副标题     title: {…}        // 配置标题     tooltip: {…}      // 配置数据点提示框     xAxis: {…}        // 配置x轴选项     yAxis: {…}        // 配置y轴选项   })

（1）研究tooltip相应的属性：

参数名	说明	默认值
enable	是否显示提示框	true
backgroundColor	设置提示框的背景色	“top”
borderColor	提示框边框颜色	“auto”
borderRadius	提示框圆角度/td>	5
style	css样式	style: { color: ‘#333333′, fontSize: ’9pt’, padding: ’5px’}
formatter	回调函数，用于格式化输出提示框的显示内容 返回的内容支持html标签如：<b>, <strong>,<br/>

主要的参数formatter：

?

1 2 3 4

formatter: function() {                             return '<b>'+ this.series.name +'</b><br/>'+                             Highcharts.dateFormat('%Y-%m-%d', this.x) +': '+ this.y ;                     }

这就是tooltip提示信息的内容。那要是直接把异步获取的信息的代码直接加到其中不就行了？

获取数据时异步的，tooltip中的formatter直接就返回值了，并没有等待异步加载的数据。

（2）既然直接向tooltip增加内容不可以，可以自己写一个div，然后显示评论信息，div然后随着数据点位置的改变而改变而改变位置。

highcharts的events只有click，mouseOver，mouseOut事件。

步骤：

（3）首先自己写个div

<div id="reporting"></div>

（4）div的样式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> #reporting {     position: absolute;      top: 35px;      right: 20px;  text-align:left; border:1px solid #c7bf93; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:6px 8px; min-width:50px; max-width:225px; color:#000;   } </style>

（5）重写 mouseOver（主要就是获取数据，并且显示），  mouseOut（隐藏div）事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

mouseOver: function() {                                                                         var itemPriceId2 = map1.get(this.series.name);                                     var pointer = this;                                     //var tooltip = pointer.series.tooltipPoints;                                                                           $.post("<%=request.getContextPath()%>/calculator/listJsonCalComment.action",                                            {itemid :itemPriceId2,type:'2', dataDate : Highcharts.dateFormat('%Y-%m-%d', this.x) },                                            function(data){                                             $("#reporting").html(data);                                             var left = pointer.plotX-110;                                             if(left <0){                                                 left =0;                                             }                                              $("#reporting").css("left",left + "px");                                               $("#reporting").css("top",pointer.plotY+75 + "px");                                              $("#reporting").show();                                         },'html');                                 },                                 mouseOut: function() {                                                                         $("#reporting").hide();                                                                       }

注意：后获取数据点位置的时候，废了很大的劲，这方面的资料很少，只能自己研究highcharts的源码。

pointer.x是x轴的值，pointer.y是y轴的值,和位置并没有任何关系。

pointer.plotX，pointer.plotY是数据点的位置。本来一开始想获取tooltip的位置，搞了半天发现tooltip相应信息保存到tooltipPoints数组中，tooltipPoints是一个对象，里面保存了每一个数据点的tooltip提示信息的属性。难点是还需要研究index值是怎么来的，获取数据点相应的tooltip在tooltipPoints索引。

（6）默认的div隐藏

?

1 2 3 4

$(document).ready(function() {         //首先隐藏评论信息的显示区         $("#reporting").hide(); }）；

好了，现在看看样子吧：