3

我想在我的 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 范围。问题是图表没有显示在页面中。任何想法问题出在哪里？

编辑：奇怪的是，我试图在同一个 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 源代码，则会生成上面显示的代码，但在浏览器中没有显示任何内容。

4

3 回答 3

3

您已经在评论中告诉您您已经解决了问题，只是在回答中总结它以便可以关闭：

问题是您已经导入了外部 jQuery.js 文件。

  • 不要导入自己的 jQuery 库，它会与绑定 primefaces 的库发生冲突。使用jQuery而不是$那时。
  • 如果您使用的是旧版本的 primefaces（如 2.2.1），请查看此答案：jQuery 与 primefaces 冲突
于 2012-05-10T18:19:44.243 回答
1

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

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

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

代码将在您的浏览器中显示 shart pie

于 2013-04-05T11:42:26.523 回答
0

尝试将标签“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>

这对我有用。

于 2014-03-26T16:12:57.037 回答