如何自定义 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

或至少只有 "height"。但是我找不到配置它们的方法。我可以使用

隐藏它们

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 文件，同时创建极地面积图。现在它显示图表中每个项目的自定义工具提示。

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

How can I customize p:polarAreaChart tooltips?

primefaces

chart.js