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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 4

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

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

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

5 个答案: