PrimeFaces 图表在被其他页面包含时不可见

Question

对 JSF 来说是全新的，但我了解生命周期。我正在使用 JSF 2.2，Primefaces 6.1。我在一个名为 bDashboard.xhtml 的 xhtml 页面中单独创建了一个布局。直接调用时工作正常。但是当我通过<ui:include src="/bDashboard.xhtml" /> 将它包含在不同的页面中时，图表不会呈现。这是仪表板文件：

<ui:composition  
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a="http://xmlns.jcp.org/jsf" 
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ct="http://www.chartistjsf.org/charts"
xmlns:ui="http://java.sun.com/jsf/facelets">


<h3>My Dashboard</h3>
<p:panelGrid columns="2" layout="grid">
    <p:panel>
        <p:chart type="pie" model="#{pieChartBean.pieModel1}"
            style="display:block;margin-right:auto;margin-left:auto;" />
    </p:panel>
    <p:panel>
        <p:chart type="pie" model="#{pieChartBean.pieModel2}" visible="true"
            style="display:block;margin-right:auto;margin-left:auto;" />
    </p:panel>
  </p:panelGrid>
</ui:composition>

上面的文件被包含在内：

<h:form id="buyerDashForm">
            <ui:include src="/bDashboard.xhtml" />
</h:form>

饼图托管 Bean：

@ManagedBean
@SessionScoped
public class PieChartBean {
    private PieChartModel pieModel1;
    private PieChartModel pieModel2;

@PostConstruct
public void init() {
    createPieModels();
}

public PieChartModel getPieModel1() {
    return pieModel1;
}

public PieChartModel getPieModel2() {
    return pieModel2;
}

private void createPieModels() {
    createPieModel1();
    createPieModel2();
}

private void createPieModel1() {
    pieModel1 = new PieChartModel();

    pieModel1.set("Kajaria Builders", 540);
    pieModel1.set("Bajaj Constructions", 325);
    pieModel1.set("Sentinel Builders", 702);
    pieModel1.set("Regency Towers", 421);

    pieModel1.setTitle("Savings By Project");
    pieModel1.setLegendPosition("w");
    pieModel1.setShadow(false);
}

private void createPieModel2() {
    pieModel2 = new PieChartModel();

    pieModel2.set("Kajaria Builders", 50);
    pieModel2.set("Bajaj Constructions", 35);
    pieModel2.set("Sentinel Builders", 72);
    pieModel2.set("Regency Towers", 41);


    pieModel2.setTitle("Savings By Spend Category");
    pieModel2.setLegendPosition("e");
    pieModel2.setShowDataLabels(true);
    pieModel2.setShadow(false);
}

页面渲染时我没有收到任何错误。

Answer 1

我相信图表组件也适用于 primeface 6.1。 我运行了您发布的上述代码 sn-p，包括 .xhtml 模板，在这里运行良好。

-> 我从 .xhtml 文件中删除了 visible=true。
->还要确保在 ui:include 中指定的模板文件的位置

我的 pom.xml 看起来像这样

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>6.1</version>
    </dependency>
    
    <!-- JSF -->
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.2.6</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.2.6</version>
    </dependency>

下面是输出