如何使用JavaScript在Zul中绘制饼图

Question

因为我是ZK框架的新手，正在尝试在zul中实现javascript代码。

我的代码如下：

<zk>
 <window id="HomePage" border="none" width="100%" height="100%" 
             hflex="min" style="background-color:green">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<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(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>        

当我执行上面的代码时，我会得到一个空白页面。有人能建议我如何修改此代码以获得饼图吗。

Answer 1

您缺少一个元素来绘制图表：document.getElementById('piechart_3d')没有找到任何内容
所以你必须添加它：

<zk xmlns:n="native">
   <window>
    ...
   <n:div id="piechart_3d"></n:div>

在这里，我使用了ZK的原生名称空间，使其呈现一个精确的HTML-div，而不是ZK小部件。这可以通过document.getElementById来解决。

另一个提示：window的hflex='min'在我的测试中产生了一些问题，所以我在下面的工作示例中删除了它。

工作示例：http://zkfiddle.org/sample/3env602/1-google-pi-chart

更新：
另一种选择是使用ZK的javascript类来查找要绘制的元素。这消除了对本地命名空间的使用
zk.Widget.$("$piechart_3d")为您提供zk Widget，您可以在其上调用$n()函数来获取它所绑定的DOMElement。

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

示例：http://zkfiddle.org/sample/gnt3cl/3-google-pi-chart-zk