線上書籍

[1042] XOOPS模組開發進階

一、 Google圖表

網址：https://developers.google.com/chart/interactive/docs/
大原則：載入js，進行javascript設定，置入HTML元件，圖表大都是這樣的架構： <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); //欲繪製的圖形函數 </script>
各種圖表：https://developers.google.com/chart/interactive/docs/gallery

二、圓餅圖

請至以下頁面複製原始碼來修改：https://developers.google.com/chart/interactive/docs/gallery/piechart
圖表會有所謂資料來源DataTable，是一個二維表格，第一個橫列是標題，底下橫列才是資料，左邊直欄是文字，右邊直欄是數字。
將資料做成"[標籤],值"的陣列，再用implode(',' , $陣列)將陣列串成用逗號隔開的字串。第一筆資料其索引值為0。
piechart的options常用選項
- (1) 加入「is3D: true,」就會變成3D版。
- (2) 加入「pieHole: 0.4,」會變甜甜圈。
- (3) 加入「pieStartAngle: 100,」可以指定圓派的起始角度
- (4) 若要讓某一塊離開圓派，可用「slices: {1: {offset: 0.2}},」，其中1為索引值（指定哪一片），offset則是離開的距離，color可以設定顏色，

三、長條圖

執行的功能不同（若要和其他圖表放一起，注意HTML元件ID需不同）： var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
data的設定：
- (1) { role: 'style' } 設定外觀
  - a. color（顏色）、opacity（不透明度）
  - b. fill-color（填充顏色）、fill-opacity（填充不透明度）、stroke-color（外框顏色）、stroke-opacity（外框不透明度）、stroke-width（外框寬度）、
- (2) { role: 'annotation' } 設定放在柱上的文字
bar的options常用選項請參考：https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#configuration-options

四、折線圖

執行的功能不同（若要和其他圖表放一起，注意HTML元件ID需不同）： var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

五、關於Y軸常用設定

以下設定均放置在options下的vAxis: {設定} 中
gridlines：指定橫線數
format: 指定數字格式，其值有「none」如8000000、「decimal」如8,000,000、「scientific」如8e6、「currency」如$8,000,000.00、「percent」如800,000,000%、「short」如8M、「long」如 8 million。

六、 TinyMap快速使用Google地圖

官網：http://app.essoduke.org/tinyMap/
申請Google Maps API KEY
- (1) 要使用google map api就必需要先申請 api金鑰才可以使用，如果一天的載入次數不超過25,000次就可以免費使用。
- (2) 登入Google後，連至 https://console.developers.google.com/project
- (3) 點選「建立專案」，專案名稱只能英文數字和「-」號
- (4) 點選「啟用和管理Google API」，然後點選「憑證→新增憑證→API金鑰→瀏覽器金鑰」，命個名稱，參照網站來源空白即可。接著複製API 金鑰即可。
使用方式： if(!file_exists(XOOPS_ROOT_PATH."/modules/tadtools/tinymap.php")){ redirect_header("http://campus-xoops.tn.edu.tw/modules/tad_modules/index.php?module_sn=1",3, _TAD_NEED_TADTOOLS); } include_once XOOPS_ROOT_PATH."/modules/tadtools/tinymap.php"; $tinymap=new tinymap($id, $x, $y, $title); $tinymap->set_key('API 金鑰'); //$tinymap->set_option(); //$tinymap->set_mark_option(); $tinymap_code=$tinymap->render(); $xoopsTpl->assign('tinymap_code',$tinymap_code);
最後在樣板加入該標籤即可。 <div id="map" style="width:100%;height:300px;"></div>
加入javascript設定的方式 $tinymap->set_option('設定項目',設定值,是否加入引號);
用來設定mark的方式 $tinymap->set_mark_option('設定項目',設定值,是否加入引號);

七、其他的圖表套件

八、頁籤的使用

官網：https://jqueryui.com/tabs/
先用 get_jquery(true); 載入 jquery ui
設定好js部份： <script> $(function() { $( "#tabs" ).tabs(); }); </script>
其HTML架構如下： <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"> <p>頁籤一內容</p> </div> <div id="tabs-2"> <p>頁籤二內容</p> </div> <div id="tabs-3"> <p>頁籤三內容</p> </div> </div>