javascript - 如何使用 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 类来查找要绘制到的元素。这消除了对 native 命名空间的使用。
zk.Widget.$("$piechart_3d") 让你得到 zk Widget ，您可以在其上调用 $n() 函数来获取它绑定(bind)到的 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