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文件。现在，它为图表中的每个项目显示自定义工具提示。

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

1 个答案: