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

我有一个带有图例的jqplot饼图，我希望在鼠标悬停在饼上时将图例文本显示为工具提示。我不知道该怎么做。有没有人有类似的经验？如何在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' } 
    } 
); 
});

来源

2011-11-21 emt14

您需要绑定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',""); 
});

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

来源

2012-05-02 13:58:40

感谢LOT：D – Anant

谢谢Koby。问候，安纳什 –

当从一部分的馅饼传递到另一部分时，你不工作，当你出门 – coorasse

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

来源

2011-11-21 20:11:44 Mark

我使用的是最新版本的jqPlot的，并得到了提示只要使用以下内部“seriesDefaults”部分的工作：

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

的重要组成部分，是“useAxesFormatters：假”，因为没有在饼图中的轴。随意将“formatString”更改为你想要的任何内容，但对于我来说，只是“％s”显示了在传说中出现的完全相同的字符串。

来源

2012-01-04 21:24:04 Srinidhi

这没有显示饼图的工具提示 –

upvoted your post。你的解决方案可以工作，但它缺少'show parameter'，你可能还需要指出，高亮插件需要加载/包含 – Mayowa

我使用下面的链接，荧光笔插件版本：

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的大小。

来源

2012-10-05 14:14:48

因为我无法让荧光笔工作 - 它在饼图上没有显示任何东西 - 我最终选择了基于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); 
    });

来源

2014-11-07 12:25:50

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

回答

相关问题