使用PRIMEFACES 绘制漂亮图表



 PrimeFaces 集成了OpenFlashChart 图标功能,大大方便在应用中使用图标,我们先来绘制一个最简单的图表

 

  • 编写JSF Beans

 

 

SaleDisplayBean.java

 

@ManagedBean(name= "chartBean1")
@SessionScoped

public class SaleDisplayBean {


    private List<Sale> sales;

    public SaleDisplayBean() {
        sales = new ArrayList<Sale>();
        sales.add(new Sale("Brand 1", 540));
        sales.add(new Sale("Brand 2", 325));
        sales.add(new Sale("Brand 3", 702));
        sales.add(new Sale("Brand 4", 421));
    }

    public List<Sale> getSales() {
        return sales;
    }

}

 

 

Sale.java

 

public class Sale {
    private String brand;
    private int amount;

    public Sale() {
    }

    public Sale(String brand, int amount) {
        this.brand = brand;
        this.amount = amount;
    }
//getters and setters for brand and amount


    public String getBrand() {
        return brand;
    }

    public void setBrand(String brand) {
        this.brand = brand;
    }

    public int getAmount() {
        return amount;
    }

    public void setAmount(int amount) {
        this.amount = amount;
    }
}

 

  • 编写前台界面XHTML 文件

chart.xhtml

 

<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
    <p:resources/>
    <title>chart</title>

    <script type="text/javascript">
        var chartStyle = {
            padding:20,
            legend: {
                    display:"right",
                    spacing:10
                    }
        };
    </script>

</h:head>

<body>
<h:form>
    <p:pieChart value="#{chartBean1.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}"
                live="true" refreshInterval="3000" style="chartStyle"/>
</h:form>
</body>
</html>

 

  • 看看展示的效果

 


使用PRIMEFACES 绘制漂亮图表_第1张图片
 

 

 

 

 

 

你可能感兴趣的:(java,UI,XHTML,JSF,sun)