在primefaces条形图的每个条上显示值

Question

是否可以在 Primefaces BarChartModel 上的每个柱形上/内部/上方显示值。我没有找到这个功能。我在 jsf 应用程序中使用 primefaces 13.0.0。我想要这样的东西：

就像你所看到的，我用黄色标记了值。

    barModel = new BarChartModel();
    ChartData data = new ChartData();

    BarChartDataSet barDataSet = new BarChartDataSet();
    barDataSet.setLabel("OEE - 24H");
    
    List<Number> values = new ArrayList<>();
    List<String> labels = new ArrayList<>();
    
    for(int i=0; i<dc.getDashboardDataList().size(); i++){
        if(dc.getDashboardDataList().get(i).getOee24() != null){
            values.add(dc.getDashboardDataList().get(i).getOee24() * 100);
        }
        else{
            values.add(dc.getDashboardDataList().get(i).getOee24());
        }
        labels.add(dc.getDashboardDataList().get(i).getMachineCodeBC());
    }
    barDataSet.setData(values);

    data.addChartDataSet(barDataSet);
    data.setLabels(labels);
    
    barModel.setData(data);

    BarChartOptions options = new BarChartOptions();
    options.setMaintainAspectRatio(false);
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    linearAxes.setOffset(true);
    linearAxes.setBeginAtZero(true);
    CartesianLinearTicks ticks = new CartesianLinearTicks();
    linearAxes.setTicks(ticks);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);        

    Title title = new Title();
    title.setDisplay(true);
    title.setText("OEE - 24H");
    options.setTitle(title);

    Legend legend = new Legend();
    legend.setDisplay(true);
    legend.setPosition("top");
    LegendLabel legendLabels = new LegendLabel();
    legendLabels.setFontStyle("italic");
    legendLabels.setFontColor("#2980B9");
    legendLabels.setFontSize(10);
    legend.setLabels(legendLabels);
    options.setLegend(legend);

    Animation animation = new Animation();
    animation.setDuration(0);
    options.setAnimation(animation);
     
    barModel.setOptions(options);

Answer 1

非常感谢您的点击，决定使用 Chart.js 插件。该脚本解决了该主题：

          <script>
            function chartExtender() {
               var options = {
                  plugins: [ChartDataLabels],
                  options: {
                     plugins: {
                        datalabels: {
                           color: '#495057'
                        }
                     }
                  },
                  data: {
                     datasets: [{
                        datalabels: {
                           color: '#495057'
                        }
                     }]
                  }
               };

               $.extend(true, this.cfg.config, options);
            };