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によって解決できます。

もう1つのヒント：windowのhflex='min'が私のテストでいくつかの問題を引き起こしたので、以下の作業例でそれを削除しました。

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

UPDATE：
別のオプションはに描画する要素を見つけるために、ZKのJavaScriptクラスを使用することです。これによりネイティブネームスペースの使用が不要になります。
zk.Widget.$("$piechart_3d") getはあなたのzk です。$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