如何在jqplot饼图上显示工具提示

Question

我有一个带有图例的jqplot饼图，我想在鼠标悬停在饼图上时将图例文本显示为工具提示。我不确定如何实现这一点。有人有类似的经验吗？

示例代码:

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

- emt14

Answer 1

我正在使用最新版本的jqPlot，只需在“seriesDefaults”部分中使用以下代码即可使工具提示起作用：

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

重要的部分是"useAxesFormatters: false"，因为饼图中没有轴。你可以随意更改"formatString"为任何想要的内容，但对我来说，只有"%s"显示与图例中完全相同的字符串。

- Srinidhi

---

点赞了你的帖子。你的解决方案可行，但是缺少“show parameter”，你可能还需要指出需要加载/包含高亮插件。 - Mayowa

Answer 2

您需要绑定jqplot的数据高亮和取消高亮事件，获取想要显示的数据，并设置包含图表的div元素的title属性。

以下代码以“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',""); 
 });

这段代码已经在我的系统中使用，没有任何问题。

- Koby Mizrahy

---

在饼图的一个区域中用鼠标移动到另一个区域时，如果不移出饼图，可能会无法正常工作。 - coorasse

@coorasse 也许你的问题与浏览器有关，因为我的问题似乎只出现在Firefox上。请参见我在http://stackoverflow.com/q/21918656/449347上的问题。 - k1eran

能否在堆叠条形图中使用相同的方法？ - usr30911

@Koby Mizrahy，如何在jqplot的饼图中始终显示工具提示或标签？对此有什么想法吗？ - Mihir

Answer 3

我正在使用以下链接中的highlighter插件版本：

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

我正在使用的参数：

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',
}

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

- Wagner Dias

Answer 4

我不认为这个有内置的功能。你需要绑定 'jqplotDataHighlight' 和 'jqplotDataUnhighlight' 事件的处理程序。请参见此页面底部的示例。这是使用气泡图来实现的，但它也应该适用于饼图。

- Mark

Answer 5

由于我无法让高亮器正常工作——它在饼图上没有显示任何内容——所以我最终采用了基于高亮器事件显示浏览器工具提示的解决方案。

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);
    }); 

- Anders Jorsal