PrimeFaces Extensions Gchart 无法正常工作答案

【问题标题】：PrimeFaces Extensions Gchart is not working properlyPrimeFaces Extensions Gchart 无法正常工作
【发布时间】：2020-08-09 23:47:49
【问题描述】：

我正在使用 PrimeFaces 6.1 版。我需要以图表格式显示我的数据。为此，我将 GChart 组件实现为链接https://www.primefaces.org/showcase-ext/sections/gchart/basic.jsf。我在我的表单中添加了链接，点击该链接，我已经渲染了图表。我需要以这种形式显示不同的图表。所以我有不同的面板来显示不同的图表点击不同的按钮。当页面加载并第一次单击链接时，图表会正确呈现。下次当我单击相同的链接时，整个页面变为空白。我在控制台搜索错误，出现如下图错误：

我需要刷新页面才能使我的页面处于工作状态。我尝试通过为 pe:gChart 标记提供 id，当我单击链接图表时出现，并且在下一次单击页面上变为空白，并且由于未定义具有新给定 id 的容器而出现错误。我的视图代码是这样的：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<h:form id="dash">
<p:commandLink id="savButton" class="small-box-footer" action="#{dashboardMB.createPieModel1}" update="@form">
                    <h:outputLabel  styleClass="np" value="#{text.Detail}"/>
                    <i class="fa fa-arrow-circle-right"></i>

</p:commandLink>
<p:panel header="#{text.Saving}"  rendered="#{dashboardMB.savVisible}" id="panelSav" closable="false" toggleable="true" >


            <p:outputPanel id="container1" layout="block">


                <div id="savChart">
                    <pe:gChart value="#{dashboardMB.savingChartModel}" width="400" height="400"
                        title="Saving Wise">

                    </pe:gChart>
                </div>



            </p:outputPanel>


</p:panel>

我的托管 bean 代码是这样的：

public void  createPieModel1() {  

            isSavVisible=true;
            DashboardModel dashObj=new DashboardModel();
            dashObj=dashBoardEJB.getvalues();
            chartSavingModel = new GChartModelBuilder()
                    .setChartType(GChartType.COLUMN)  
                    .addColumns("Topping", "Slices")
                    .addRow("A", dashObj.getCount1())  
                    .addRow("V", dashObj.getCount2())
                    .addRow("Z", dashObj.getCount3())
                    .addRow("W", dashObj.getCount4())
                    .build();  
  }

【问题讨论】：

您提到您的 PrimeFaces 版本为 6.1，但您使用的是哪个版本的 Primefaces 扩展？ GChart 是一个扩展组件。似乎在展示中运行良好您可以将您的代码与展示进行比较吗？ primefaces.org/showcase-ext/sections/gchart/basic.jsf
primefaces 扩展版本为 6.0.0
好的，问题 #1 您的 PFE 版本应该与您的 PF 版本匹配，因此如果您使用的是 6.1，则需要使用此处找到的 PFE 6.1.1：search.maven.org/artifact/org.primefaces.extensions/…
我将 primefaces 扩展从 6.0.0 更改为 6.1.1 并且它有效。非常感谢@Melloware
如果您想将其标记为已解决，我将其发布为解决您问题的答案。

标签： primefaces primefaces-extensions gchart

【解决方案1】：

您的版本不匹配。您正在使用 PrimeFaces 6.1，但仅使用 PrimeFaces Extensions 6.0.0。您的 PF 和 PFE 版本必须始终匹配。

您可以阅读发行说明指南以了解哪个版本始终排成一行： https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/Release-Notes

因此，通过升级到 PFE 6.1.1，它将匹配您的版本并解决您的问题。

【讨论】：