Simon Tai 在.NET上的學習日誌

2009-10-27

Google Chart API 學習筆記

  • 557
  • 0

摘要:Google Chart API 學習筆記

[Windows Mobile]使用 Google Chart API 產生 QR Code

 

1. 簡介

Google Chart API 是 Google 所提供，透過網址下達參數，會傳回 PNG 格式的圖表；而本文透過 QR Code 的實作，讓大家了解如何使用 Google Chart API 產生圖表，下圖為 Google Chart API 開發人員指南截圖。

image

 

2. QR Code 參數說明

首先我們知道 Google Chart API 是透過網址來傳遞參數進而繪出圖表，我們透過舉例來讓大家更清楚要下什麼參數，以下網址為產生 .NET菜鳥自救會的 QR Code

http://chart.apis.google.com/chart?cht=qr&chs=150x150&chld=M&chl=http://www.dotblogs.com.tw/chou/

其中包含的參數

 

參數範例設定值說明
chtqr表示圖表為 QR Code
chlhttp://www.dotblogs.com.tw/chou/QR Code 的文字，必須使用 UTF8 的 URL 編碼文字
choe 設定輸出編碼，可選 UTF-8 (預設值) 、Shift_JIS、ISO-8859-1
chs150x150圖表的像素大小
chldM<EC level> 錯誤修正 | <margin> 邊界，請參考 *註1

*註1

<EC level> 錯誤修正可設定為

  • L 可恢復 7% 的 QR 代碼
  • M 可恢復 15% 的 QR 代碼
  • Q 可恢復 25% 的 QR 代碼
  • H 可恢復 30% 的 QR 代碼

 <margin> 定義周圍的邊界 (或空白區域)，預設等於圖表 4 行列的邊界

 

3. 產生 QR Code

了解如何設定參數後，接著我們就可以產生 QR Code，我們在表單加入 TextBox ( 使用者輸入文字 )、Button ( 點選後產生QR Code )、PictureBox ( 顯示 QR Code )

程式碼如下

view plaincopy to clipboardprint?
  1. using System;   
  2. using System.Linq;   
  3. using System.Collections.Generic;   
  4. using System.ComponentModel;   
  5. using System.Data;   
  6. using System.Drawing;   
  7. using System.Text;   
  8. using System.Windows.Forms;   
  9. using System.Net;   
  10.   
  11. namespace SmartDeviceProject1   
  12. {   
  13.     public partial class Form1 : Form   
  14.     {   
  15.         public Form1()   
  16.         {   
  17.             InitializeComponent();   
  18.         }   
  19.   
  20.         private void btnQRcode_Click(object sender, EventArgs e)   
  21.         {   
  22.             // 設定 Google Chart API 的網址參數   
  23.             string strQRcode = "http://chart.apis.google.com/chart?cht=qr&chs=150x150&chld=M&chl=" + this.txtQRcode.Text;   
  24.   
  25.             // 讀取網路圖片到 PictureBox      
  26.             HttpWebRequest req = (HttpWebRequest)WebRequest.Create(strQRcode);      
  27.             HttpWebResponse rsp = (HttpWebResponse)req.GetResponse();      
  28.             if (rsp.StatusCode == System.Net.HttpStatusCode.OK)      
  29.             {      
  30.                 this.pbQRcode.Image = new Bitmap(rsp.GetResponseStream());      
  31.             }      
  32.             rsp.Close();    
  33.         }   
  34.     }   
  35. }  
using System;
using System.Linq;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Net;

namespace SmartDeviceProject1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnQRcode_Click(object sender, EventArgs e)
        {
            // 設定 Google Chart API 的網址參數
            string strQRcode = "http://chart.apis.google.com/chart?cht=qr&chs=150x150&chld=M&chl=" + this.txtQRcode.Text;

            // 讀取網路圖片到 PictureBox   
            HttpWebRequest req = (HttpWebRequest)WebRequest.Create(strQRcode);   
            HttpWebResponse rsp = (HttpWebResponse)req.GetResponse();   
            if (rsp.StatusCode == System.Net.HttpStatusCode.OK)   
            {   
                this.pbQRcode.Image = new Bitmap(rsp.GetResponseStream());   
            }   
            rsp.Close(); 
        }
    }
}

 

執行結果

image

 

假如想要在 Windows Mobile 讀取 QR Code 內容值，可參考 Puma 的文章，使用 Open Source QRCode Library 讀取 QR Code

[Mobile]Windows Mobile - Camera 結合 QR Code 運用

或者可以使用 OpenNETCF QRCode Library for .NET Compact Framework，可參考 Mark Arteaga 的文章

QRCode for .NET Compact Framework

 

想要了解其他圖表的作法，有個不錯的網頁把各種圖表列出來

Google Chart API 學習筆記

 

4. 參考

Google 圖表 API

本頁段落