[JavaScript] Google Chart API 畫出QRCode

2013-09-27

4770
0
Javascript

摘要:[JavaScript] Google Chart API 畫出QRCode

Google Chart API

這是Google提供的一個免費的畫圖Web API Service ，只要傳入指定選項與內容即可透過呼叫Web API Service的方式產生你要的圖或表甚至是QRCode

除了傳統的直接互叫web service 服務之外，現在只要是google提供的API都有做動態載入的功能，使用上如下

 <!--載入 AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  //動態載入 Visualization API 與 piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // 設定 Google Visualization API 成功載入時的callback function
  google.setOnLoadCallback(drawChart);

  // 執行畫圖
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // 設定畫圖相關屬性
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // 傳入畫圖相關數興趣產生畫圖的instance並將結果畫在指定內容上
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>