使用PRIMEFACES 绘制漂亮图表

最新推荐文章于 2024-05-10 11:46:57 发布

shuaiche_china

最新推荐文章于 2024-05-10 11:46:57 发布

阅读量468

点赞数

文章标签： JSF Java XHTML UI SUN

本文链接：https://blog.csdn.net/shuaiche_china/article/details/83531403

版权

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>

看看展示的效果

shuaiche_china

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用PRIMEFACES 绘制漂亮图表

PrimeFaces 集成了OpenFlashChart 图标功能，大大方便在应用中使用图标，我们先来绘制一个最简单的图表编写JSF Beans SaleDisplayBean.java @ManagedBean(name= "chartBean1")@SessionScopedpublic class SaleDisplayBean {...
复制链接

扫一扫