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

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

load（“当前”{packages:[“corechart”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[“自动化”，11]，
[“手册”，2]，
[‘报告’，2]，
[“工资单”，2]，
[MISC'，7]
]);
变量选项={
标题：“我的日常工作活动”，
is3D：是的，
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart_3d'）；
图表绘制（数据、选项）；
}

---

当我执行上述代码时，我得到一个空白页。是否有人可以建议我如何修改此代码以获得饼图。

您缺少绘制饼图的元素：

document.getElementById（'piechart_3d'）

找不到任何内容。
所以你必须加上：

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

例如：

---

感谢flo的解释和示例。它现在对我有用。

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