Question

我正在使用jQplot和JavaScript。我想从jQplot中的支持bean值而不是静态数组生成饼图。

<f:view>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <a4j:loadStyle src="../../resources/chart/css/jquery.jqplot.css"/>
        <a4j:loadScript src="../../resources/chart/jqplot-javascript/jquery-1.3.2.min.js"/>
        <a4j:loadScript src="../../resources/chart/jqplot-javascript/jquery.jqplot.min.js"/>
        <a4j:loadScript src="../../resources/chart/jqplot-javascript/jqplot.pieRenderer.min.js"/>

  <script type="text/javascript">

            var jsonPieObj = {                    
                "pageHits": [
                    ['JAN 2009', 120],
                    ['Feb 2009',60],
                    ['Mar 2009',22],
                    ['Apr 2009',5],
                    ['May 2009',60],
                    ['June 2009',30],
                    ['Jul 2009',22]]
            };

            $(function() {

                $('#pieChartButton1').click(function() {
                    $('#chartDiv').html('');                      
                    $.jqplot('chartDiv', [jsonPieObj.pageHits], CreatePieChartOptions1());
                });

            });

            function CreatePieChartOptions1()
            {
                var optionsObj = {
                    title: 'Blog Statistics',
                    legend: {
                        show: true,
                        location: 'nw'
                    },
                    seriesDefaults:{
                        shadow: true,
                        renderer:$.jqplot.PieRenderer,
                        rendererOptions:{
                            sliceMargin:10,
                            shadowOffset:1,
                            shadowAlpha:0.5,
                            shadowDepth:5
                        }
                    },
                    highlighter: {
                        showTooltip: true,
                        tooltipFade: true
                    }
                };
                return optionsObj;
            }

</script>
</head>
<body>


<h:form id="pieChartForm">
 <rich:panel id="pieChartRichPanel">

                <div>
                    <rich:panel>
                        <div id="chartDiv" style="width:600px; height:400px;" />
                    </rich:panel>
                </div>

                <div>
                    <input id="pieChartButton1" type="button" value="Pie Chart for Page Hits" />                        
                </div>                   
            </rich:panel>
</h:form>
</body>
</html>
</f:view>

我的静态内容：

var jsonPieObj = {                    
            "pageHits": [
                ['JAN 2009', 120],
                ['Feb 2009',60],
                ['Mar 2009',22],
                ['Apr 2009',5],
                ['May 2009',60],
                ['June 2009',30],
                ['Jul 2009',22]]
        };

帮我解决这个问题。提前谢谢。

Answer 1

创建表示页面匹配的模型对象。

public class PageHit {
    private String period;
    private Integer hits;

    // Add/generate the usual c'tor/getter/setter boilerplate.
}

以某种方式将其作为List<PageHit>填充在您的bean中。

public class Bean {
    private List<PageHit> pageHits;

    public Bean() {
        pageHits = loadItSomehow();
    }

    // Add/generate getters, etc.
}

在您的JSP中导入JSTL核心（在/WEB-INF/lib中将jstl-1.2.jar放在您还没有的情况下）：

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

使用JSTL <c:forEach>标记迭代List<PageHit>并将其打印出来，好像它是一个JS数组：

var jsonPieObj = {                    
    "pageHits": [
    <c:forEach items="#{bean.pageHits}" var="pageHit" varStatus="loop">
        ['${pageHit.period}', ${pageHit.hits}]${!loop.last ? ',' : ''}
    </c:forEach>
]};

就是这样。

在webbrowser中打开页面，右键单击并选择查看源以检查它是否已正常完成其工作。即，生成的JS代码没有语法错误。

将动态值从后端传递到jQplot饼图？

1 个答案: