有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

javascript如何从zul ZK中的控制器获取json对象?

我需要使用Google chart在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":"Manual","hours":2},{"taskName":"Report","hours":2},{"taskName":"Payroll","hours":2},{"taskName":"MISC","hours":7}]

我的祖尔:

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

共 (2) 个答案

  1. # 1 楼答案

    感谢Gusti Arya,我修改了我的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>
    
  2. # 2 楼答案

    您可以使用Clients.evalJavaScript();将Json从控制器传递到视图, 像这样:

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

    在控制器中:

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