我试图在点击提交按钮时更新<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"
,但也不行。有谁知道我做错了什么?
答案 0 :(得分:0)
<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" />