0

我正在使用 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]]
        };

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

4

1 回答 1

1

创建一个代表页面点击的模型对象。

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

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

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

public class Bean {
    private List<PageHit> pageHits;

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

    // Add/generate getters, etc.
}

在您的 JSP 中导入 JSTL 核心（如果您还没有，请放入jstl-1.2.jar ）：/WEB-INF/lib

<%@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 中打开页面，右键单击并选择View Source以检查它是否已正确完成其工作。即生成的JS代码没有语法错误。

于 2010-12-09T03:27:51.270 回答