동적 값을 백엔드에서 jQplot piechart로 전달 하시겠습니까?

jQplot 및 JavaScript를 사용하고 있습니다. 정적 배열 대신 jQplot에서 빈 값을 백업하여 piechart를 생성하려고합니다.동적 값을 백엔드에서 jQplot piechart로 전달 하시겠습니까?

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

도움말 나. 미리 감사드립니다.

출처

2010-12-08 Eswar

페이지 히트를 나타내는 모델 객체를 만듭니다.

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

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

는 List<PageHit>로 어떻게 든 콩에 채 웁니다. 당신의 JSP에서

public class Bean { 
    private List<PageHit> pageHits; 

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

    // Add/generate getters, etc. 
}

가져 오기 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> 
]};

그게 전부입니다.

웹 브라우저에서 페이지를 열고 오른쪽 버튼을 클릭하여 소스보기을 선택하여 올바르게 작업했는지 확인하십시오. 즉, 생성 된 JS 코드에는 구문 오류가 없습니다.

출처

2010-12-09 03:27:51 BalusC

동적 값을 백엔드에서 jQplot piechart로 전달 하시겠습니까?

답변

관련 문제