Question

我需要使用谷歌图表在zk中创建一个图表，如下所示：

这是我的控制者：

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”： “自动化”， “小时”：11}，{ “TASKNAME”： “手动”， “小时”：2}，{ “TASKNAME”： “报告”， “小时”：2 }，{ “TASKNAME”： “工资”， “小时”：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

您可以使用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 + "')");

Answer 2

感谢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>

如何在zul ZK中从控制器获取json对象？

2 个答案: