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

Question

在 primefaces jqplot 条形图上自定义工具提示以显示百分比值而不是实际值的最佳方法是什么。 IE。如果有 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 class 上自定义它，方法是：

如果您有水平条形图：

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

如果您有垂直条形图：

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

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

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

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

Primefaces jqplot bar chart custom tool tip - percent value

primefaces

tooltip

bar-chart

jqplot