PrimeFaces barChart未显示

时间:2014-02-19 18:46:18

标签: java jsf jsf-2 primefaces xhtml

我遇到barCharts的问题。 我为Primefaces的barCharts写了一个例子,但是在页面上它们是不可见的。

这里是Bean类:

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.ChartSeries;

@ManagedBean
@ViewScoped

public class InvoiceStatisticsBean implements Serializable {
private CartesianChartModel categoryModel; 

public InvoiceStatisticsBean() {
    categoryModel = new CartesianChartModel();  

    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", 135);  
    girls.set("2008", 120);  

    categoryModel.addSeries(boys);  
    categoryModel.addSeries(girls); 
}

public CartesianChartModel getCategoryModel() {
    return categoryModel;
}

public void setCategoryModel(CartesianChartModel categoryModel) {
    this.categoryModel = categoryModel;
}
}

这是.xhtml文件:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Invoice Statistics</title>
    </h:head>
    <h:body>
        <ui:composition template="/templates/layout.xhtml">
            <ui:define name="header">
                <h1>Invoice Statistics</h1>
            </ui:define>

        <ui:define name="content">
            <p>There should be a barChart</p>   
            <p:barChart id="horizontal" value="#{invoiceStatisticsBean.categoryModel}" legendPosition="se" style="height:300px" title="Horizontal Bar Chart" orientation="horizontal" min="0" max="200"/>  
            <p:outputPanel>test</p:outputPanel>
        </ui:define>
    </ui:composition>
</h:body>
</html>

很抱歉编辑错误,但这是我的第一个问题。

因此,如果我然后启动.xhtml页面,barChart的空间将保留在页面上,但它没有显示。

有人可以帮我解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

 <p:panel>
       <p:chart ......>
 </p:panel>

应该修复它,p:panel

答案 1 :(得分:0)

ok primefaces 4.0就是问题。

使用3.5

中的一个从primefaces 4.0中交换jquery.js文件

答案 2 :(得分:0)

如果您使用jquery使用模板,那么您应该添加此行

$ .noConflict();