Tad 教材網 - 線上書籍

:::

\[1042\] XOOPS模組開發進階
====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/39/5.pdf)

### 一、 Google圖表

1. 網址：<https://developers.google.com/chart/interactive/docs/>
2. 大原則：載入js，進行javascript設定，置入HTML元件，圖表大都是這樣的架構： ```
  <pre class="brush:xml;">
  <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>
  ```
3. 各種圖表：<https://developers.google.com/chart/interactive/docs/gallery>
 
### 二、 圓餅圖

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

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

1. 執行的功能不同（若要和其他圖表放一起，注意HTML元件ID需不同）： ```
  <pre class="brush:xml;">
  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  ```
 
### 五、 關於Y軸常用設定

1. 以下設定均放置在options下的vAxis: {設定} 中
2. gridlines：指定橫線數
3. 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地圖

1. 官網：<http://app.essoduke.org/tinyMap/>
2. 申請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 金鑰 即可。
3. 使用方式： ```
  <pre class="brush:php;">
  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);
  ```
4. 最後在樣板加入該標籤即可。 ```
  <pre class="brush:xml;">
  <div id="map" style="width:100%;height:300px;"></div>
  ```
5. 加入javascript設定的方式 ```
  <pre class="brush:php;">
  $tinymap->set_option('設定項目',設定值,是否加入引號);
  ```
6. 用來設定mark的方式 ```
  <pre class="brush:php;">
  $tinymap->set_mark_option('設定項目',設定值,是否加入引號);
  ```
 
### 七、其他的圖表套件

1. PHP：<http://pchart.sourceforge.net/>
2. jQuery： <http://www.jqplot.com/>
3. jQuery：<http://www.omnipotent.net/jquery.sparkline/>
4. JavaScript：<http://mbostock.github.io/protovis/ex/>
5. JavaScript：<http://www.fusioncharts.com/javascript-chart-fiddles/>
6. JavaScript：<http://www.jscharts.com/examples>
7. JavaScript：<http://cyberpython.github.io/AwesomeChartJS/>
8. JavaScript：<http://www.rgraph.net/>
9. JavaScript：<http://www.humblesoftware.com/flotr2>
10. Flash：<http://www.axiis.org/examples.html>
11. Flash：[http://www.maani.us/xml\_charts/index.php](http://www.maani.us/xml_charts/index.php)
12. Silverlight：[http://www.visifire.com/silverlight\_charts\_gallery.php](http://www.visifire.com/silverlight_charts_gallery.php)
 
### 八、頁籤的使用

1. 官網：<https://jqueryui.com/tabs/>
2. 先用 get\_jquery(true); 載入 jquery ui
3. 設定好js部份： ```
  <pre class="brush:jscript;">
  <script>
    $(function() {
      $( "#tabs" ).tabs();
    });
  </script>
  ```
4. 其HTML架構如下： ```
  <pre class="brush:xml;">
  <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>
   
  ```

:::