線上書籍

Home

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