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元件，圖表大都是這樣的架構： ```
    
    <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需不同）： ```
    
    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需不同）： ```
    
    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. 使用方式： ```
    
    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. 最後在樣板加入該標籤即可。 ```
    
    <div id="map" style="width:100%;height:300px;"></div>
    ```
5. 加入javascript設定的方式 ```
    
    $tinymap->set_option('設定項目',設定值,是否加入引號);
    ```
6. 用來設定mark的方式 ```
    
    $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部份： ```
    
    <script>
      $(function() {
        $( "#tabs" ).tabs();
      });
    </script>
    ```
4. 其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>
     
    ```

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1207

快速登入

書籍目錄

展開 | 闔起

線上使用者

92人線上 (17人在瀏覽線上書籍)

會員: 0

訪客: 92

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者