如何使用 JavaScript 在 Zul 中绘制饼图
How to draw a pie-chart in Zul using JavaScript
因为我是 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>
当我执行上面的代码时,我得到一个空白页面。任何人都可以建议我如何修改此代码以获得饼图。
您缺少用于绘制图表的元素:
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 类 来查找要绘制的元素。这消除了对本机命名空间的使用。
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>
因为我是 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>
当我执行上面的代码时,我得到一个空白页面。任何人都可以建议我如何修改此代码以获得饼图。
您缺少用于绘制图表的元素:
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 类 来查找要绘制的元素。这消除了对本机命名空间的使用。
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>