Question

我想在我的JSF应用程序中显示primefaces饼图。

这是我的xhtml页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.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">

<f:view contentType="text/html">
    <ui:include src="blocks/head.xhtml"/>

    <body>
    <ui:include src="blocks/header.xhtml"/>

        <p:pieChart id="sample"
                    value="#{pieChartBean.pieModel}"
                    legendPosition="w"
                    title="Sample Pie Chart"
                    style="width:400px;height:300px"/>

    <ui:include src="blocks/footer.xhtml"/>
    </body>
</f:view>
</HTML>

这是我的豆子：

@ManagedBean(name = "pieChartBean")
@ViewScoped
public class PieChartBean implements Serializable {

   private PieChartModel pieModel;

    public PieChartBean() {
        createPieModel();
    }

    public PieChartModel getPieModel() {
        return pieModel;
    }

    private void createPieModel() {
        pieModel = new PieChartModel();

        pieModel.set("Brand 1", 540);
        pieModel.set("Brand 2", 325);
        pieModel.set("Brand 3", 702);
        pieModel.set("Brand 4", 421);
    }

}

我把bean放在ViewScope中，我也试过了Session和Request范围。问题是图表没有显示在页面中。任何想法问题在哪里？

EDITED：奇怪的是，我尝试在同一个xhmtl页面中添加一些其他组件，我添加了<p:spinner/>并且它有效。它显示在我的JSF页面中，但图表不是。

编辑2：

萤火虫：

<div id="sample" style="width:400px;height:300px"></div>
<script id="sample_s" type="text/javascript">
$(function(){PrimeFaces.cw('PieChart','widget_sample',{id:'sample',data:[[["Brand 1",540],["Brand 2",325],["Brand 3",702],["Brand 4",421]]],title:'Sample Pie Chart',legend:{show:true,renderer: $.jqplot.EnhancedLegendRenderer,location:'w'},axes:{xaxis:{},yaxis:{}}},'charts');});
</script>

如果我使用firebug查看生成的HTML源代码，则会生成上面显示的代码，但在浏览器中不会显示任何内容。

Answer 1

你已经在评论中告诉你，你已经解决了这个问题，只是在答案中总结一下，这样就可以关闭了：

问题是你导入了外部jQuery.js文件。

不要导入自己的jQuery库，它会与与primefaces捆绑在一起的jQuery冲突。然后使用jQuery代替$。
如果您使用的是旧版本的primefaces（如2.2.1），请查看以下答案：jQuery conflict with primefaces

Answer 2

我有同样的问题，我尝试通过在.xhtlm中添加此行来解决它

<h:head>
    <title>Graphe Prime Faces </title>
</h:head>

当我看到你的代码时，你有像我一样的错误，只需添加你的页面.xhml这个

代码将在浏览器中显示shart饼图

Answer 3

尝试将标签“p：pieChart”放入面板标签p：panel

                <p:panel>
                <p:pieChart id="sample"
                value="#{pieChartBean.pieModel}"
                legendPosition="w"
                title="Sample Pie Chart"
                style="width:400px;height:300px"/>
                </p:panel>

为我工作。

PrimeFaces饼图未显示在JSF 2.0中

3 个答案: