0

嗨，我已经为此苦苦挣扎了几个小时，我想使用 Primefaces 请求上下文将我的 POJO 以 JSON 格式发送到我的 JSF 中的 Highchart 以更新其值。基本上我从他自己的stackoverflow问题中关注@Bhesh Gurung的这个解决方案， 但我似乎无法让它工作。现在它正在抛出：

找不到从“j_idt31”引用的标识符“pieData”的组件。

我想通过 Primefaces 请求上下文使用 JSON 数据成功创建一个高图。请帮助提前谢谢。

这是我下面的代码

@ManagedBean
@ViewScoped

public class PieDataProvider {

        public void retrievePieData() { 
            List<String> categories = new ArrayList<String>();
            categories.add("Electronic");
            categories.add("Food");
            categories.add("Liguor");
            categories.add("Stationary");
            categories.add("Mechanical");

            List<Integer> itemCounts = new ArrayList<Integer>();

            itemCounts.add(5);
            itemCounts.add(20);
            itemCounts.add(1);
            itemCounts.add(50);
            itemCounts.add(10);

            RequestContext reqCtx = RequestContext.getCurrentInstance();
            reqCtx.addCallbackParam("categories", new Gson().toJson(categories));
            reqCtx.addCallbackParam("itemCounts", new Gson().toJson(itemCounts));
            System.out.println(categories);
        }

 }

我的 xhtml page5.xhtml

<?xml version="1.0" encoding="UTF-8"?>


<ui:composition template="/template/common/commonLayout.xhtml">

    <ui:define name="content">
        <h:head>

            <script type="text/javascript">
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
                src="http://code.highcharts.com/highcharts.js"
                src="http://code.highcharts.com/modules/exporting.js"
            </script>


            <script type="text/javascript">
                function feedPieData(xhr, status, args) {
                    var categories = eval('(' + args.categories + ')');
                    var itemCounts = eval('(' + args.itemCounts + ')');

                    options.xAxis.categories = categories;

                    var series = {
                        data : []
                    };

                    series.name = new Date().toString();
                    series.data = itemCounts;

                    options.series = [ series ];

                    chart = new Highcharts.Chart(options);
                }
            </script>

        </h:head>
        <h:body>
            <p:commandLink action="#{pieDataProvider.retrievePieData}"
                oncomplete="feedPieData(xhr, status, args);" value="Pie chart demo"
                update="pieData" />
        </h:body>
    </ui:define>

    <ui:define name="footer">
        <h2>This is page5 Footer</h2>
    </ui:define>

</ui:composition>

更新：修改的 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:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:body>
    <ui:composition template="/template/common/commonLayout.xhtml">
        <ui:define name="content">
            <h:head>
                <script type="text/javascript"
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
                <script type="text/javascript">
                    $(function() {
                        $('#container')
                                .highcharts(
                                        {
                                            chart : {
                                                plotBackgroundColor : null,
                                                plotBorderWidth : null,
                                                plotShadow : false
                                            },
                                            title : {
                                                text : 'Most used words, 2010'
                                            },
                                            tooltip : {
                                                pointFormat : '{series.name}: {point.percentage}',
                                                percentageDecimals : 1
                                            },
                                            plotOptions : {
                                                pie : {
                                                    allowPointSelect : true,
                                                    cursor : 'pointer',
                                                    dataLabels : {
                                                        enabled : true,
                                                        color : '#000000',
                                                        connectorColor : '#000000',
                                                        formatter : function() {
                                                            return '<b>'
                                                                    + this.point.name
                                                                    + '</b>: '
                                                                    + this.percentage
                                                            //+ ' %'
                                                            ;
                                                        }
                                                    }
                                                }
                                            },
                                            series : [ {
                                                type : 'pie',
                                                name : 'Browser share',
                                                data : [ [ 'Red', 45.0 ],
                                                        [ 'Orange', 26.8 ], {
                                                            name : 'Yellow',
                                                            y : 12.8,
                                                            sliced : true,
                                                            selected : true
                                                        }, [ 'Green', 8.5 ],
                                                        [ 'Blue', 6.2 ],
                                                        [ 'Violet', 0.7 ] ]
                                            } ]
                                        });
                    });
                </script>
                <script type="text/javascript">
                    function feedPieData(xhr, status, args) {
                        var categories = JSON.parse(args.categories);
                        var itemCounts = JSON.parse(args.itemCounts);

                        var series = {
                            data : []
                        };
                        options.series[0].data.length = 0;
                        series.data = categories;
                        series.data = itemCounts;

                        options.series = [ series ];

                        chart = new Highcharts.Chart(options);
                    }
                </script>

                <script src="http://code.highcharts.com/highcharts.js"></script>
                <script src="http://code.highcharts.com/modules/exporting.js"></script>
            </h:head>
            <h:body>

                <div id="container"
                    style="min-width: 400px; height: 400px; margin: 0 auto"></div>
                <h:form>
                    <p:commandLink action="#{pieDataProvider.retrievePieData}"
                        oncomplete="feedPieData(xhr, status, args);"
                        value="Pie chart demo" />
                </h:form>
            </h:body>
        </ui:define>

        <ui:define name="footer">
            <h2>This is page5 Footer</h2>
        </ui:define>

    </ui:composition>

</h:body>

</html>
4

1 回答 1

7

您似乎没有理解 Highcharts 是一个仅在客户端运行的 JavaScript 环境，而 PrimeFaces/JSF 在服务器端，它们在这种情况下仅作为 HTML、CSS 和 JavaScript 代码生成器。

在您的特定情况下，PrimeFaces 仅用于通过RequestContext. 在 AJAX 调用完成并有效后，客户端接收到序列化数据，您调用一个 JavaScript 函数，该函数完全在客户端上根据接收到的数据创建一个 Highcharts JS 组件。

总而言之，它为我们提供了以下设置。

** 视图元素 **

<h:form>
    <p:commandLink action="#{pieDataProvider.retrievePieData}"
                   oncomplete="feedPieData(xhr, status, args);"
                   value="Generate pie chart" />
</h:form>

** JavaScript **

<script type="text/javascript">
    function feedPieData(xhr, status, args) {
        var categories = JSON.parse(args.categories);//serialized data from server
        var itemCounts = JSON.parse(args.itemCounts);//serialized data from server

        //next you create the chart and show it
    }
</script>

**动作方法**

public void retrievePieData() { 
    List<String> categories = generateCategories();
    List<Integer> itemCounts = generateItems();
    RequestContext reqCtx = RequestContext.getCurrentInstance();
    reqCtx.addCallbackParam("categories", new Gson().toJson(categories));//additional serialized data to be sent
    reqCtx.addCallbackParam("itemCounts", new Gson().toJson(itemCounts));//additional serialized data to be sent
}
于 2013-05-07T09:29:33.970 回答