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

Question

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

在网上找了一个JS插件，叫chartjs-plugin-datalabels！这就是我需要的。

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

Answer 1

试试这个...

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

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

在您图表的 Java 模型中，打开扩展器功能。

chartModel.setExtender("chartExtender");

在您的 XHTML 中添加此 Java脚本代码函数以在您在 #2 Java bean 中设置时匹配。

function chartExtender() {
   var 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 添加数据标签

How to add datalabels to chartJS on Primefaces

primefaces

chart.js