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

【问题标题】：How to display tooltips on jqplot pie chart如何在 jqplot 饼图上显示工具提示
【发布时间】：2014-11-07 20:25:50
【问题描述】：

我有一个带有图例的 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' }
    }
  );
});

【问题讨论】：

标签： javascript jquery charts tooltip jqplot

【解决方案1】：

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

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

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

【讨论】：

为您的帖子点赞。您的解决方案有效，但缺少“显示参数”，您可能还需要指出，需要加载/包含荧光笔插件

【解决方案2】：

你需要绑定jqplot数据highligh和unhighligh事件，抓取你要展示的数据并设置包含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',""); 
 });

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

【讨论】：

谢谢科比。问候，阿尼什
用鼠标从馅饼的一部分传递到另一部分而不离开时不起作用
@coorasse 也许您的问题与您的浏览器有关，因为我的问题似乎与 Firefox 相关。在stackoverflow.com/q/21918656/449347 看到我的问题
是否可以将相同的用于堆叠条形图？
@Koby Mizrahy 如何在 jqplot 的饼图中始终显示工具提示或标签？对此有什么想法吗？

【解决方案3】：

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

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 大小时出现问题。

【讨论】：

【解决方案4】：

我不相信有一个内置的。您需要将处理程序绑定到“jqplotDataHighlight”和“jqplotDataUnhighlight”事件。请参阅此page 底部的示例。这是用气泡图做的，但它也应该转化为饼图。

【讨论】：

【解决方案5】：

由于我无法让荧光笔工作 - 它没有在饼图中为我显示任何内容 - 我最终找到了基于 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);
    });

【讨论】：