Question

在primefaces jqplot条形图上自定义工具提示以显示百分比值而不是实际值的最佳方法是什么？即如果有3条，分别为10、20、20，我希望工具提示显示20％40％40％。

我正在使用js扩展程序，并且使用以下方法获取值（而不是百分比）：

enter   this.cfg.highlighter = {
tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
  return plot.data[seriesIndex][pointIndex];
},
show: true

};

是否可以对点进行迭代，计算总数，然后计算出百分比（并格式化此字符串）？

我还可以在Java层中进行计算-并添加为不可见的序列，并通过序列索引获取它？

预先感谢

Answer 1

只需遍历plot.data[seriesIndex]，计数，划分，相乘

var series = plot.data[seriesIndex];
var total = 0;
series.forEach(function(entry) {
    total = total + entry;
});
var percent = Math.round((plot.data[seriesIndex][pointIndex] / total)*100)+"%";
return percent;

Answer 2

您还可以通过执行以下操作在Java类上对其进行自定义：

如果您有水平条形图：

horizontalBarChartModel.setDatatipFormat("%1$.2f %");

如果您有垂直条形图：

verticalBarChartModel.setDatatipFormat("%2$.2f %");

格式标签的两个值（1和2）之间的区别在于，默认情况下，PrimeFaces会生成带有两个标签的默认工具提示，一个用于图表上的条形索引（例如：第一条，第二条）其他（针对该条设置的实际值）（在托管Bean上设置的用于呈现该图表的值）。当您使用垂直条形图模型时，工具提示的第一个标签将成为索引值，而当您使用水平条形图模型时，第一个标签将成为图表上该条的实际值。

如果您还需要显示所有条形都为100％的条形图，请记住，您必须在控制器层中计算百分比（至少要容易得多）。

Primefaces jqplot条形图自定义工具提示-百分比值

2 个答案: