:::

5. Google圖表應用及頁籤

一、 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
  12. Silverlight: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%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D39%26tbdsn%3D1207

書籍目錄

展開 | 闔起

線上使用者

36人線上 (3人在瀏覽線上書籍)

會員: 0

訪客: 36

更多…