如何在jqplot饼图上显示工具提示 [英] How to display tooltips on jqplot pie chart

问题描述

我有一个jqplot饼图和一个图例，我想获得的图例文字显示为工具提示时，鼠标悬停在馅饼上。我不知道该怎么做。

I have a jqplot pie chart with a legend and I would like to get the legend text to appear as a tooltip when the mouse hovers on the pies. I'm not sure how to do that. Does anyone have any experience doing similar?

示例代码：

$(document).ready(function(){
  var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

推荐答案

您需要绑定jqplot数据highligh和unhighligh事件，抓取您要显示的数据，并设置包含div的title属性的图表。

You need to bind the jqplot data highligh and unhighligh events, grab the data you want to show and set the chart containing div's title attribute.

以下代码显示格式为x：y的标题，其中x是图例标签，y是值：

The following code shows the title in the format of "x: y", where x is the legend label and y is the value:

 var plot = $.jqplot('plotDivId',...);

 $("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title', data[0] + ": " + data[1]);                               
        }); 

 $("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title',""); 
 });

这段代码正在我的系统中使用，没有问题。

This piece of code is being used in my system which works with no problem.

这篇关于如何在jqplot饼图上显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！