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>

そして、これが私のBeanです。

@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：

Firebug：

<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>

生成されたHTMLソースをfirebugで調べると、上記のコードが生成されますが、ブラウザーには何も表示されません。

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であると追加してくださいこれ

シャートパイをコード化すると、ブラウザに表示されます

于 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 に答える