1
我正在使用primefaces 5.0並且想要創建一個lineChart。在primefaces 5.0中創建一個lineChart
然而，我無法使可運行的例子：
包com.srbp.service;
@ManagedBean
@ViewScoped
public class ChartView implements Serializable {
/**
* UUID
*/
private static final long serialVersionUID = 7618160241636269628L;
private LineChartModel lineModel1;
private LineChartModel lineModel2;
@PostConstruct
public void init() {
createLineModels();
}
public LineChartModel getLineModel1() {
return lineModel1;
}
public LineChartModel getLineModel2() {
return lineModel2;
}
private void createLineModels() {
lineModel1 = initLinearModel(); //I get an error here
lineModel1.setTitle("Linear Chart");
lineModel1.setLegendPosition("e");
Axis yAxis = lineModel1.getAxis(AxisType.Y);
yAxis.setMin(0);
yAxis.setMax(10);
lineModel2 = initCategoryModel();
lineModel2.setTitle("Category Chart");
lineModel2.setLegendPosition("e");
lineModel2.setShowPointLabels(true);
lineModel2.getAxes().put(AxisType.X, new CategoryAxis("Years"));
yAxis = lineModel2.getAxis(AxisType.Y);
yAxis.setLabel("Births");
yAxis.setMin(0);
yAxis.setMax(200);
}
private CartesianChartModel initLinearModel() {
CartesianChartModel model = new CartesianChartModel();
LineChartSeries series1 = new LineChartSeries();
series1.setLabel("Series 1");
series1.set(1, 2);
series1.set(2, 1);
series1.set(3, 3);
series1.set(4, 6);
series1.set(5, 8);
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Series 2");
series2.set(1, 6);
series2.set(2, 3);
series2.set(3, 2);
series2.set(4, 7);
series2.set(5, 9);
model.addSeries(series1);
model.addSeries(series2);
return model;
}
private LineChartModel initCategoryModel() {
LineChartModel model = new LineChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 90);
girls.set("2008", 120);
model.addSeries(boys);
model.addSeries(girls);
return model;
}
}
但是，我在lineModel1 = initLinearModel();處得到一個錯誤。將其轉換爲CartesianChartModel時，該錯誤已解決。但是，我沒有得到使用時顯示的任何東西：
<p:panel widgetVar="panel" visible="false" closable="true">
<h3>Throughput</h3>
<p:lineChart type="line" model="#{chartView.lineModel2}"
style="height:300px;" />
</p:panel>
此外，在HTML中div圖表是空的。
任何建議如何解決？
UPDATE
我改變了我的頁面（見下文），當我加入<h:head />。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head />
<body>
<ui:composition template="/site/master/master_template.xhtml">
<ui:define name="content">
<div>
<h:form>
<p:growl id="growl" sticky="true" showDetail="true" />
<p:wizard flowListener="#{streamEngineWizard.onFlowProcess}">
<p:tab id="confirm" title="6. Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="3"
columnClasses="grid,grid,grid">
Summary of all values!
</h:panelGrid>
<p:commandButton value="Run Benchmark!" ajax="true"
actionListener="#{streamEngineWizard.save}" update="growl"
process="@this"
onclick="PF('panel_progress').show();PF('pbAjax').start();" />
</p:panel>
</p:tab>
</p:wizard>
</h:form>
<!-- progressbar panel -->
<p:panel widgetVar="panel_progress" visible="false" closable="true"
toggleable="true" rendered="true">
<h:form>
<p:growl id="growl" />
<h3>Your configuration is running!</h3>
<br />
<p:progressBar widgetVar="pbAjax" ajax="true"
value="#{progressBarView.progress}" labelTemplate="{value}%"
styleClass="animated" global="false">
<p:ajax event="complete" listener="#{progressBarView.onComplete}"
update="growl" oncomplete="PF('panel_analytics').show()" />
</p:progressBar>
</h:form>
</p:panel>
<div style="margin-top: 40px;" />
<!-- analytics panel -->
<p:panel widgetVar="panel_analytics" visible="false" closable="true">
<h3>Throughput</h3>
<p:chart type="line" model="#{chartView.animatedModel1}"
style="height:300px;" rendered="true" />
</p:panel>
<p:chart type="line" model="#{chartView.animatedModel1}"
style="height:300px;" rendered="true" />
</div>
</ui:define>
</ui:composition>
<script type="text/javascript">
function start() {
window['progress'] = setInterval(function() {
var pbClient = PF('pbClient'),
oldValue = pbClient.getValue(),
newValue = oldValue + 10;
pbClient.setValue(pbClient.getValue() + 10);
if(newValue === 100) {
clearInterval(window['progress']);
}
}, 1000);
}
</script>
</body>
</html>
然而，當我把<p:chart的<p:panel widgetVar="panel_analytics" visible="false" closable="true">外面呈現。但是，我需要在面板中呈現它，因爲在進度條達到100％之後，應該顯示analyitcs面板。
任何建議如何我可以實現我的用例？