Передать динамическое значение из серверной части в круговую диаграмму jQplot? - PullRequest
Новая
       16

Передать динамическое значение из серверной части в круговую диаграмму jQplot?

0 голосов
/ 08 декабря 2010

Я использую jQplot и JavaScript.Я хочу сгенерировать круговую диаграмму на основе значений bean-компонента в jQplot вместо статического массива. 

<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]]
        };

Помогите мне в этом.Заранее спасибо.

1 Ответ

1 голос
/ 09 декабря 2010

Создайте объект модели, представляющий попадание на страницу. 

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

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

Заполните его каким-либо образом в вашем компоненте как List<PageHit>. 

public class Bean {
    private List<PageHit> pageHits;

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

    // Add/generate getters, etc.
}

Импортируйте ядро ​​JSTL в свой JSP (положите 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>
]};

Вот и все.

Откройте страницу в веб-браузере, щелкните правой кнопкой мыши и выберите Просмотр источника , чтобы проверить, выполнил ли он свою работудолжным образом.Т.е. сгенерированный код JS не имеет синтаксических ошибок.

...