使用PRIMEFACES 绘制漂亮图表

cheshuai

浏览: 34067 次

最近访客更多访客>>

ddkwubai

vision_xie

yyx8136

1434472947

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (17)

社区版块

存档分类

JSF Java XHTML UI SUN

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>