Question

我正在使用Primefaces上的新ChartJS库创建图表，但找不到在条形图或折线图上添加值作为标签的方法。

在互联网上，我发现了一个名为chartjs-plugin-datalabels的JS插件！那就是我需要的。

如何在Java Primefaces应用程序上使用此插件？

Answer 1

尝试一下...

将脚本添加到您的XHTML页面：

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script>

在图表的Java模型中，将Extender功能设置为打开。

chartModel.setExtender("chartExtender");

在您的XHTML中，添加此JavaScript代码函数以在您设置＃2 Java bean时进行匹配。

function chartExtender() {
   //copy the config options into a variable
   var options = $.extend(true, {}, this.cfg.config);

   options = {
      plugins: [ChartDataLabels],
      options: {
         plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
               color: '#36A2EB'
            }
         }
      },
      data: {
         datasets: [{
            // Change options only for labels of THIS DATASET
            datalabels: {
               color: '#FFCE56'
            }
         }]
      }
   };

   //merge all options into the main chart options
   $.extend(true, this.cfg.config, options);
};

这都是基于他们的配置指南https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#configuration，但这至少可以使插件正常运行。

如何在Primefaces上向chartJS添加数据标签

1 个答案: