zulのコントローラからjsonオブジェクトを取得するには？

Question

私は以下のように、Googleのチャートを用いてZKのチャートを作成する必要があります。

enter image description here

これは私のコントローラである：

public class ChartForm extends GenericComposer{ 

public List<Task> listTask; 
public String json; 

/* (non-Javadoc) 
* @see org.zkoss.zk.ui.util.GenericComposer#doAfterCompose(org.zkoss.zk.ui.Component) 
*/ 
@Override 
public void doAfterCompose(Component comp) throws Exception { 
    // TODO Auto-generated method stub 
    super.doAfterCompose(comp); 

    TaskService ts = new TaskService(); 

    listTask = ts.getTask(); 

    json = new Gson().toJson(listTask); // I't OK until here 

    System.out.println(json); 
} 

}

値は次のとおりです。

[{"taskName"： "Automation"、 "hours"：11}、{"taskName" "taskName"： "report"、 "hours"：2、{"taskName"： "Payroll"、 "hours"：2}、{"taskName"： "MISC" 」、 "時間"：7}]

マイZUL：

<zk> 
<window id="HomePage" apply = "com.dom.form.ChartForm" border="none" width="100%" height="100%" style="background-color:green"> 
<script type="text/javascript" src="https://www.gstatic.com/chart/loader.js"></script> 
    <div id="piechart_3d" style="width: 500px; height: 300px;"> 
    <script type="text/javascript"> 
     google.charts.load("current", {packages:["corechart"]}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Automation',  11], 
      ['Manual',  2], 
      ['Report', 2], 
      ['Payroll', 2], 
      ['MISC', 7] 
     ]); 

     var options = { 
      title: 'My Daily Work Activities', 
      is3D: true, 
     }; 


     var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n()); 
     chart.draw(data, options); 
     } 
    </script> 
    </div> 

    </window> 

</zk> 

は今、私はJSONオブジェクトを取得し、データ（変数）に挿入し

var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Automation',  11], 
     ['Manual',  2], 
     ['Report', 2], 
     ['Payroll', 2], 
     ['MISC', 7] 
    ]); 

おかげでする必要があります進出

tarmizi

Answer 1

し、表示するコントローラーからJSONを渡すためにClients.evalJavaScript();を使用することができ、このような ：

function drawChart(jsonObj){ 
    var data = JSON.parse(jsonObj); 
    var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n()); 
    chart.draw(data, options); 
} 

とあなたのコントローラで：アーヤをGUSTIする

TaskService ts = new TaskService(); 
listTask = ts.getTask(); 
json = new Gson().toJson(listTask); 
Clients.evalJavaScript("drawChart('" + json + "')"); 

Answer 2

感謝は、私は以下のように私のzulを変更しました：

<zk> 
<window id="HomePage" apply = "com.dom.form.ChartForm" border="none" width="100%" height="100%" style="background-color:green"> 
    <div id="piechart_3d" style="width: 500px; height: 300px;"> 
    <!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> --> 
    <script type="text/javascript"> 
     var dataJson; 
     var data = []; 

     function getData(jsonObj){ 
      dataJson = JSON.parse(jsonObj); 

      var header = ['Task Name','Hours']; 
      data.push(header); 

      for(var i = 0; i &lt; dataJson.length; i++){ 
       var temp = []; 
       temp.push(dataJson[i].taskName); 
       temp.push(dataJson[i].hours); 

       data.push(temp); 
      } 

      return data; 
     } 

     google.charts.load("current", {packages:["corechart"]}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart(){ 

      var chartdata = new google.visualization.arrayToDataTable(data); 

      var options = { 
       title: 'My Daily Work Activities', 
       is3D: true, 
      }; 

      var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n()); 
      chart.draw(chartdata, options); 

     }  
    </script> 
    </div> 
    </window> 
</zk>