JQplot工具提示用于多个y轴

时间:2012-07-09 06:46:05

标签: tooltip axis jqplot

对于具有2 y轴的JQplot图表,我能够设置工具提示,但当我将鼠标悬停在数据点上时,我需要知道工具提示属于哪个y轴。我需要这个,以便我可以在乘以适当的比例因子后显示工具提示。我试过的代码如下所示。当我们将鼠标悬停在属于y2轴的数据点上时,我认为y将为null。但是y永远不会为空。

 $("#"+sTargetId).bind('jqplotcustomDataMouseOver', 
                   function (ev, seriesIndex, pointIndex, data) {    
                     var chart_left = $("#"+sTargetId).offset().left,
                     chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
                     chart_top = $("#"+sTargetId).offset().top,
                       x = oPlot.axes.xaxis.u2p(data[0]),
                       y = oPlot.axes.yaxis.u2p(data[1]),
                       y2 = oPlot.axes.y2axis.u2p(data[1]);;
                       if(y===null|| y===undefined){   //this condition doesnt work
                       var tooltipDataYaxis = data[1]*scaleYaxis1;
                       var sYDisplay = this.sYAxis1MeasureName;
                       $('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
                       }
                       else{

                        tooltipDataYaxis = data[1]*scaleYaxis2;
                        sYDisplay = this.sYAxis2MeasureName;
                        $('#tooltip').css({left:chart_left+x, top:chart_top+y2, marginRight:chart_right});
                       }

                          $('#tooltip').html(

                                 '<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">'+ sYDisplay+': ' + tooltipDataYaxis +'</span>');
                         $('#tooltip').show();
                   });

        $("#"+sTargetId).bind('jqplotcustomDataUnhighlight', 
                 function (ev, seriesIndex, pointIndex, data) {
                     $('#tooltip').empty();
                     $('#tooltip').hide();
                 });


    }

2 个答案:

答案 0 :(得分:0)

变量seriesIndex将帮助识别工具提示所属的系列。 :)

答案 1 :(得分:0)

我第一次玩jqplot。非常有趣。

在荧光笔插件jqplot.highlighter.js中 我在第336行扩展了它

elem.html(str +“component:”+ neighbor.data [2] );

您可以使用Chrome开发人员工具来获取此时的数据模型,并查看邻居对象的内容。 (范围变量&gt;本地&gt;邻居&gt;数据)

我就是这样做的。希望它有所帮助。