5. Google圖表應用及頁籤

一、 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('設定項目',設定值,是否加入引號);

七、其他的圖表套件

PHP：http://pchart.sourceforge.net/
jQuery： http://www.jqplot.com/
jQuery：http://www.omnipotent.net/jquery.sparkline/
JavaScript：http://mbostock.github.io/protovis/ex/
JavaScript：http://www.fusioncharts.com/javascript-chart-fiddles/
JavaScript：http://www.jscharts.com/examples
JavaScript：http://cyberpython.github.io/AwesomeChartJS/
JavaScript：http://www.rgraph.net/
JavaScript：http://www.humblesoftware.com/flotr2
Flash：http://www.axiis.org/examples.html
Flash：http://www.maani.us/xml_charts/index.php
Silverlight：http://www.visifire.com/silverlight_charts_gallery.php

八、頁籤的使用

官網：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>

4-5 /get_event.php