動的値をバックエンドからjQplot piechartに渡しますか？

jQplotとJavaScriptを使用しています。私は静的配列の代わりにjQplotのbean値をバッキングすることから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>と入力してください。

public class Bean { 
    private List<PageHit> pageHits; 

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

    // Add/generate getters, etc. 
}

あなたのJSP（あなたはまだそれを持っていない場合のために /WEB-INF/libに jstl-1.2.jarを置く）で

インポートJSTLのコア：

<%@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に渡しますか？

答えて

関連する問題