Question

我试图在点击提交按钮时更新<p:chart>，但图表始终保持不变。我用谷歌搜索了这个，我被告知要使用我已经在做的Ajax更新命令。这是我的代码：

.xhtml

<body>
    <ui:define name="content">
        <h:form id="chartForm">
            <p:growl id="msgs" showDetail="true" />

            <p:panel header="Select a Location" style="margin-bottom:10px;">
                <h:panelGrid columns="4" cellpadding="5">
                    <p:outputLabel for="facility" value="Facility: " />

                    <p:selectOneMenu id="facility" value="#{visualization.facility}" converter="#{facilityConverterBean}" style="width:150px">
                        <p:ajax event="change" process="@this" partialSubmit="true" listener="#{visualization.onFacilityChange()}" update="component" />
                        <f:selectItem itemLabel="Select Facility" noSelectionOption="true" />
                        <f:selectItems value="#{visualization.facilities}" var="facility" itemLabel="#{facility.name}" itemValue="#{facility}" />
                    </p:selectOneMenu>

                    <p:outputLabel for="component" value="Components: " />

                    <p:selectOneMenu id="component" value="#{visualization.component}" converter="#{componentConverterBean}" style="width:150px">
                        <f:selectItem itemLabel="Select Component" noSelectionOption="true" />
                        <f:selectItems value="#{visualization.components}" var="comp" itemLabel="#{comp.name}" itemValue="#{comp}" />
                    </p:selectOneMenu>

                    <p:outputLabel for="datetimefrom" value="Datetime from" />
                    <p:calendar id="datetimefrom" value="#{visualization.dateFrom}" pattern="dd/MM/yyyy HH:mm" />
                    <p:outputLabel for="datetimeto" value="Datetime to" />
                    <p:calendar id="datetimeto" value="#{visualization.dateTo}" pattern="dd/MM/yyyy HH:mm" />
                    <h:outputLabel for="recordcount" value="Record count" />
                    <p:spinner id="recordcount" value="#{visualization.recordCount}" stepFactor="25" />
                </h:panelGrid>

                <p:separator />

                <p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:lineChartTemperatures" icon="ui-icon-check" />
            </p:panel>

            <p:tabView id="chartTab">
                <p:tab title="Diagramm">
                    <p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
                </p:tab>

                <p:tab title="DataTable">
                    <h:panelGrid>
                        <h:outputText value="....not implemented" />
                    </h:panelGrid>
                </p:tab>
            </p:tabView>
        </h:form>

    </ui:define>
</body>

fetchDataRecords（）

public void fetchDataRecords(){
        List<BhkwRecord> data = bhkwService.getRecordsFromTo(component.getId(), dateFrom, dateTo);
        //System.out.println("Amount of records fetched: " + data.size());
        lineChart.updateBhkwChartRuecklauf(data);
    }

将另一个系列添加到图表中的方法

public void updateBhkwChartRuecklauf(List<BhkwRecord> data) {
    //data not used here, just added simulated data to test

    LineChartSeries series3 = new LineChartSeries();
    series3.setLabel("Series3");
    series3.set("2014-01-01 00:10:50", 54);
    series3.set("2014-01-01 01:12:50", 20);
    series3.set("2014-01-01 04:14:50", 60);
    series3.set("2014-01-01 06:17:50", 30);

    dateModel.addSeries(series3);
}

通常情况下，按钮点击后，该方法应该向图表添加另一系列数据并进行更新，但不会发生任何事情。我也尝试过update="@form"，但也不行。有谁知道我做错了什么？

Answer 1

<p:tab title="Diagramm">
    <p:outputPanel id="chartPnl>
       <p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
    </p:outputPanel>
</p:tab>

您可以尝试将图表放在另一个类似的outputPanel-组件中，并在commandButton中更新它。

<p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:chartPnl" icon="ui-icon-check" />

p：图表不会更新

1 个答案: