[1042] XOOPS模組開發進階
<{$toolbar}>
<h1>統計圖表</h1>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">圓派圖</a></li>
<li><a href="#tabs-2">長條圖</a></li>
<li><a href="#tabs-3">統計圖</a></li>
</ul>
<div id="tabs-1">
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['分類', '人數'],
<{$pie_data}>
]);
var options = {
title: '各分類的人數統計',
is3D:true,
slices: {0: {offset: 0.1}, 3: {offset: 0.5}}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
//新增點擊就連結的函數
// function selectHandler() {
// var selectedItem = chart.getSelection()[0];
// if (selectedItem) {
// var topping = data.getValue(selectedItem.row, 0);
// location.href="index.php?cate_sn="+topping;
// }
// }
//新增傾聽事件
// google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
<h3>圓派圖</h3>
<div id="piechart" style="width: 100%; height: 500px;"></div>
</div>
<div id="tabs-2">
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['分類', '人數'],
<{$pie_data}>
]);
var options = {
title: '各分類的人數統計'
};
var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));
//新增點擊就連結的函數
// function selectHandler() {
// var selectedItem = chart.getSelection()[0];
// if (selectedItem) {
// var topping = data.getValue(selectedItem.row, 0);
// location.href="index.php?cate_sn="+topping;
// }
// }
//新增傾聽事件
// google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
</script>
<h3>長條圖</h3>
<div id="ColumnChart" style="width: 100%; height: 500px;"></div>
</div>
<div id="tabs-3">
<h3>折線圖</h3>
</div>
</div>