我如何自定义p：polarAreaChart工具提示？

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);
            const currentTooltip = options.tooltips
            options = {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem) {
                            console.log(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文件。现在，它为图表中的每个项目显示自定义工具提示。