4

因为我是 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>

当我执行上述代码时，我得到一个空白页。谁能建议我如何修改此代码以获取饼图。

4

1 回答 1

2

您缺少将图表绘制到的元素： document.getElementById('piechart_3d')没有找到任何东西。
所以你必须添加它：

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

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

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

工作示例：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

于 2016-07-21T16:46:20.593 回答