PrimeFaces 14.0.0图表组件报错,升级后新旧实现均无法运行
PrimeFaces 13升级至14.0.0后Chart.js图表功能无法正常运行
问题概述
- 从PrimeFaces 13升级到14.0.0版本,图表功能已切换为基于Chart.js,但官方示例代码无法直接运行
- 旧版已弃用的
p:barChart组件报错:Uncaught TypeError: PrimeFaces.widget.Chart is undefined,已移除所有旧代码,问题仍未解决
尝试方案及报错详情
已尝试PrimeFaces 14文档中所有新图表组件用法:绑定存储JSON字符串的Bean属性(RAW Json方式)、使用xdev Java类生成JSON、Facet变体。其中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>
运行后浏览器控制台出现两个错误:
jquery-plugins.js.xhtml中:Uncaught TypeError: Y.style is undefined- Chart.js中:
Uncaught TypeError: right-hand side of 'in' should be an object, got undefined
已确认的配置信息
- 加载的JS库版本均为最新:PrimeFaces v14.0.0、Chart.js v4.4.2、jQuery v3.7.1
- 与官方示例仅命名空间不同:官方使用
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>
求助问题
请问还遗漏了哪些配置或步骤?有什么解决该问题的技巧?
内容的提问来源于stack exchange,提问作者holsteto
相关产品推荐
相关产品推荐

