javascript - 在 jqplot 饼图工具提示中显示百分比

Question

我将 primefaces 与 jqplot 库一起使用。

在我的饼图中我有扩展器属性，在 javascript 函数中我有这个：

this.cfg.highlighter = {
     show:true,
     tooltipLocation: 'n',
     tooltipAxes: 'y',
     useAxesFormatters: false,
     tooltipFormatString: '%s'
}

工具提示显示部分值，但不显示部分百分比。

有人知道如何在工具提示中显示百分比值吗？

谢谢。

Answer 1

You can bind the highlight event in order to modify the tooltip :

$("#chart1").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
 var highlightToolTip = $(".jqplot-highlighter-tooltip");   
 var pct = Math.round(data[1]/total*100);
 highlightToolTip.html(data[0]+", "+pct+"%");  
});

Where :

• data1 is the value of the highlighted slice,
• data[0] is the label of the highlighted slice,

• total is a variable containing the total value of your plot built here :

   data = [
      ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
      ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  
  var total = 0;
  $(data).map(function(){total += this[1];})
  

Please see a working example on fiddle here