PrimeFaces：ChartJs 堆积条形图标签去除答案

【问题标题】：PrimeFaces: ChartJs stacked bar chart label removalPrimeFaces：ChartJs 堆积条形图标签去除
【发布时间】：2020-11-10 12:06:48
【问题描述】：

我正在开发一个仪表板，其中有一个包含一些销售代表数据的图表。这是我的代码和图片。

//xhtml element:
<p:panel  header="Oportunidades">
    <p:barChart id="graficoOportunidadesRepresentante" model="#{dashboardBean.barModel}" style="width:100%; height:420px"/>         
</p:panel>  

//Bean generation method:
public void criaGraficoOportunidadesPorRepresentante() {
    barModel = new BarChartModel();
    ChartData data = new ChartData();
    [...]
    data.setLabels(labels); //comes from the related sales rep's name
    barModel.setData(data); //backend fetches amounts from database

    // Options
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    linearAxes.setStacked(true);
    cScales.addXAxesData(linearAxes);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);

    Title title = new Title();
    title.setDisplay(true);
    title.setText(labelGraficoOportunidadesAtivas);
    options.setTitle(title);

    Tooltip tooltip = new Tooltip();
    tooltip.setMode("index");
    tooltip.setIntersect(false);
    options.setTooltip(tooltip);
    
    barModel.setExtender("chartOportunidadePorRepresentanteExtender");
    barModel.setOptions(options);
}
    
//Javascript extender: 
    function chartOportunidadePorRepresentanteExtender() {                             
               var options = $.extend(true, {}, this.cfg.config);
                options = {
                 options: {             
                    plugins: {
                      labels: {
                        render: 'value',
                        position: 'inside'
                      }
                    },
                    title: {
                        fontSize: 16
                    }
                  }
                  };           
               $.extend(true, this.cfg.config, options);
            };

我希望条形图上的数字不呈现，因为它们在元素的工具提示上更清晰易读，并且相互堆叠 as per this screenshot.AFAIK，label 指的是代表的名称，每个数据集还有一个“.setLabel(String)”方法，用于在图表标题和内容之间进行渲染。我找到了一些引用 "legend" 属性的解决方案，但它取消了迄今为止称为 label 属性的渲染。

【问题讨论】：

也许我不明白，但在这个例子中没有数字？ primefaces.org/showcase/ui/chartjs/bar/bar.xhtml 它们仅在工具提示中。
没错，我的代码与示例几乎相同（扩展程序除外，它的删除只是从整数变为百分位数）
您是否尝试过移除扩展器以查看它的外观？您的扩展器可能正在清除其他设置，因为我看到您正在设置 labels。
是的，通过这样做而不是数字，我得到了条形顶部的百分位数
奇怪的是 PF Showcase 不会有相同的行为，但事实并非如此？你的某些东西一定不一样。

标签： javascript java primefaces chart.js

【解决方案1】：

我已经成功了。在 js 扩展器中：

labels: {
         render: 'value',
         fontSize: 0
         }

我什至不知道为什么要删除“位置：内部”值，我只是这样做了。 fontSize = 0 隐藏了数字。

【讨论】：