如何在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?

我有一个带有图例的jqplot饼图,我希望当鼠标悬停在馅饼上时,传奇文本会显示为工具提示。我不知道该怎么做。有没有人有类似的经验?

example code:

$(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' }
    }
  );
});

5 个解决方案

#1

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.

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

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

以下代码以“x:y”的格式显示标题,其中x是图例标签,y是值:

 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.

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

#2

I'm using the latest version of jqPlot and got the tooltips to work by just using the following inside "seriesDefaults" section:

我正在使用最新版本的jqPlot并通过在“seriesDefaults”部分中使用以下内容来获得工具提示:

highlighter: {
  show: true,
  formatString:'%s', 
  tooltipLocation:'sw', 
  useAxesFormatters:false
}

The important part is "useAxesFormatters: false" since there are no axes in a pie chart. Feel free to change the "formatString" to whatever it is you want to, but for me, just "%s" shows the exact same string which shows up in the legends.

重要的部分是“useAxesFormatters:false”,因为饼图中没有轴。随意将“formatString”更改为您想要的任何内容,但对我来说,只有“%s”显示完全相同的字符串,显示在图例中。

#3

I am using the version of the highlighter plugin on the following link:

我在以下链接上使用了荧光笔插件的版本:

https://github.com/tryolabs/jqplot-highlighter

The parameters I am using:

我正在使用的参数:

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.

新参数确保了工具提示出现的固定位置。我更喜欢将它放在左上角,以避免调整容器div的大小。

#4

I do not believe there is a built in for this. You'll need to bind handlers to the 'jqplotDataHighlight' and 'jqplotDataUnhighlight' events. See the example on the bottom of this page. This is doing it with bubble plots, but it should translate to pie plots as well.

我不相信这是内置的。您需要将处理程序绑定到'jqplotDataHighlight'和'jqplotDataUnhighlight'事件。请参阅本页底部的示例。这是通过气泡图进行的,但它也应该转换为饼图。

#5

As I couldn't get the Highlighter to work - it did not display anything for me on the pie chart - I ended up with the solution to display a browser tooltip based on the highligter event.

因为我无法使荧光笔工作 - 它在饼图上没有显示任何东西 - 我最终得到了基于highligter事件显示浏览器工具提示的解决方案。

var plot1 = jQuery.jqplot ('chart1', [data], {
seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer
    }
}
);

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data;
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    });

#1