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解决此问题。

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

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

<强>更新
另一种选择是使用ZK的javascript类来查找要绘制的元素。这消除了使用本机命名空间 window让你成为zk Widget，你可以在其上调用zk.Widget.$("$piechart_3d")函数来获取它所绑定的DOMElement。

$n()

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

如何使用JavaScript

1 个答案: