primefaces - 如何自定义 p :polarAreaChart tooltips?

Question

我有极地面积图

<p:polarAreaChart
    rendered="#{someBean.modelToDisplay != null}"
    model="#{someBean.createPolarAreaModel(someBean.modelToDisplay, true)}"
    style="width: 100%; height: 400px;"
/>

我想自定义其工具提示。当我添加标签和值时

values.add(10);
labels.add("height");

我在图表上看到的工具提示始终是

height: 10

我希望它是

height: someOtherValue

或者至少只有“高度”。但我找不到配置它们的方法。 我可以使用

隐藏它们

Tooltip tooltip = new Tooltip();
tooltip.setEnabled(false);
polarAreaChartOptions.setTooltip(tooltip);

但这就是我能做的。

Answer 1

我使用以下 JS 代码向 xhtml 添加了脚本部分:

<h:outputScript>
    function configurePolarChart() {
        let options = $.extend(true, {}, this.cfg.config).options
        options.tooltips = {
            callbacks: {
                label: function(tooltipItem) {
                    switch (tooltipItem.index) {
                        case 0:
                            return "Lower-Temperature"
                        case 1:
                            return "Upper-Temperature"
                        case 2:
                            return "Height"
                        case 3:
                            return "Weight"
                        case 4:
                            return "Length"
                        case 5:
                            return "Age"
                        default:
                            return "";
                    }
                }
            }
        }
        this.cfg.config.options = options
    }
</h:outputScript>

对应于我数据中的6个值。我还添加了

polarAreaModel.setExtender("configurePolarChart");

创建极地面积图时复制到我的 .java 文件。现在，它显示图表中每个项目的自定义工具提示。