Primefaces 14.0.0 中的图表导致 jQuery 出现错误

Question

我从 Primefaces 13 更新到 Primefaces 14.0.0。图表功能已升级为使用 Chart.js，我相应地更新了我的代码。由于它不能开箱即用，我从条形图展示案例复制了示例代码，但没有成功。

遗憾的是，以前使用现已弃用的 primefaces Chartjs 组件 (p:barChart) 的旧实现也不再起作用。它还会导致错误

Uncaught TypeError: PrimeFaces.widget.Chart is undefined

。是的，还尝试删除所有旧代码以确保新示例运行时不受干扰，我对此进行了如下描述。

我尝试了primefaces图表文档中描述的新图表组件的所有变体，即RAW Json方法（通过将值绑定到包含json字符串的bean属性），并且还使用xdev java类来生成json。最后但并非最不重要的一点是，我尝试了 Facet 变体，如下所示。

<ui:composition template="/WEB-INF/templates/templateAdminPage.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="jakarta.faces.core"
                xmlns:h="jakarta.faces.html"
                xmlns:ui="jakarta.faces.facelets"
                xmlns:my="jakarta.faces.component"
                xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:chart style="width: 100%; height: 300px">
  <f:facet name="value">
   {
     type: 'bar',
     data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3],
         borderWidth: 1,
         backgroundColor: ['DarkRed', 'CornflowerBlue', 'Gold', 'Lime', 'BlueViolet', 'DarkOrange']
       }]
     },
     options: {
       scales: {
         y: {
           beginAtZero: true
         }
       }
     }
   }
  </f:facet>
</p:chart>

</ui:define>
</ui:composition>

当我运行该示例时，我在浏览器控制台中收到错误：

Uncaught TypeError: Y.style is undefined

，在

jquery-plugins.js.xhtml

内。

chart.js 中出现后续错误：

Uncaught TypeError: right-hand side of 'in' should be an object, got undefined

。

我检查了加载的 js 库是最新的，并且所有包含的库也是最新的。使用中的是：

• Primeface v14.0.0
• Chart.js v4.4.2（通过浏览器检查确定）
• jQuery v3.7.1

我还将我的代码与示例展示代码进行了比较，但我无法理解其中的差异。 我唯一发现的是使用不同的命名空间，例如bar.xhtml 示例的命名空间定义是

xmlns:p="primefaces"

而不是

xmlns:p="http://primefaces.org/ui"

。

我使用的maven依赖项是：

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>14.0.0</version>
            <classifier>jakarta</classifier>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>14.0.0</version>
            <classifier>jakarta</classifier>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>resources-monacoeditor</artifactId>
            <version>14.0.0</version>
        </dependency>
        <dependency>
            <groupId>software.xdev</groupId>
            <artifactId>chartjs-java-model</artifactId>
            <version>1.4.1</version>
        </dependency>

我错过了什么？有什么技巧可以让它发挥作用吗？

预先感谢您的提示和帮助！

Answer 1

这是一个再现器： https://github.com/user-attachments/files/15794833/primfaces14-chart.zip

解压并运行

mvn clean jetty:run

并导航到

http://localhost:8080/

你会发现它工作正常