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

Answer 1

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

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

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

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

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

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