Google Chart API 畫出QRCode

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

Google Chart API

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!--載入 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>

範例

這邊帶大家看一個QRCode的範例,此範例是用呼叫服務的方式產生

JS Bin

基本上要畫圖表也可以,而此範例適用動態載入後再呼叫服務的方式產生

JS Bin

結語

想知道還可以做到什麼更多的內容,請參考

想要線上玩玩Google的Chart API 可以到