利用ASP.NET AJAX結合Google Chart API產生Pie chart(圓餅圖)
最近在Google Chart API 看到很多圖形
只要懂得裡面參數的用法..再加上利用asp.net ajax來控制那些參數
就可以做出很漂亮的即時統計結果...還不錯用...
小弟就介紹一個圓餅圖的用法....
這支程式主要是將兩個值(puma,blueshop)分成10等分
透過參數的設定就可以即時改變圓餅圖的樣子.....
c#範例
Chart.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>
02
03 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
04 Namespace="System.Web.UI" TagPrefix="asp" %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
06 <html xmlns="http://www.w3.org/1999/xhtml">
07 <head id="Head1" runat="server">
08 <title>Chart</title>
09 </head>
10 <body>
11 <form id="form1" runat="server">
12 <div>
13 <asp:ScriptManager ID="ScriptManager1" runat="server">
14 </asp:ScriptManager>
15 </div>
16 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
17 <ContentTemplate>
18 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="puma(+)" />
19 <asp:Label ID="Label1" runat="server" Text="10"></asp:Label>：<asp:Label ID="Label2"
20 runat="server" Text="0"></asp:Label>
21 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="blueshop(+)" /><br />
22 <asp:Image ID="Image1" runat="server" />
23 </ContentTemplate>
24 </asp:UpdatePanel>
25 </form>
26 </body>
27 </html>
28
02
03 <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
04 Namespace="System.Web.UI" TagPrefix="asp" %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
06 <html xmlns="http://www.w3.org/1999/xhtml">
07 <head id="Head1" runat="server">
08 <title>Chart</title>
09 </head>
10 <body>
11 <form id="form1" runat="server">
12 <div>
13 <asp:ScriptManager ID="ScriptManager1" runat="server">
14 </asp:ScriptManager>
15 </div>
16 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
17 <ContentTemplate>
18 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="puma(+)" />
19 <asp:Label ID="Label1" runat="server" Text="10"></asp:Label>：<asp:Label ID="Label2"
20 runat="server" Text="0"></asp:Label>
21 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="blueshop(+)" /><br />
22 <asp:Image ID="Image1" runat="server" />
23 </ContentTemplate>
24 </asp:UpdatePanel>
25 </form>
26 </body>
27 </html>
28
Chart.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
12public partial class Chart : System.Web.UI.Page
13{
14
protected void Page_Load(object sender, EventArgs e)
15
{
16 if (!IsPostBack)
17 {
18 SetChart(10, 0);
19
}
20 }
21
22 //puma+1,blueshop-1
23 protected void Button1_Click(object sender, EventArgs e)
24 {
25 int cnt = int.Parse(this.Label1.Text);
26
27 if (cnt != 10)
28 {
29 cnt++;
30 this.Label1.Text = cnt.ToString();
31 this.Label2.Text = Convert.ToString(10 - cnt);
32 SetChart(cnt, 10 - cnt);
33 }
34
35 }
36
37 //blueshop+1,puma-1
38 protected void Button2_Click(object sender, EventArgs e)
39 {
40 int cnt = int.Parse(this.Label2.Text);
41
42 if (cnt != 10)
43 {
44 cnt++;
45 this.Label2.Text = cnt.ToString();
46 this.Label1.Text = Convert.ToString(10 - cnt);
47 SetChart(10 - cnt, cnt);
48 }
49 }
50
51 protected void SetChart(int puma, int blueshop)
52 {
53 this.Image1.ImageUrl = string.Format("http://chart.apis.google.com/chart?cht=p3&chd=s:{0}{1}&chs=300x100&chl=puma|blueshop", Enum.GetName(typeof(code), puma), Enum.GetName(typeof(code), blueshop));
54 }
55}
56
57 //A=0,B=1....K=10,請參考google chart
58//http://code.google.com/apis/chart/
59enum code
60{
61 A = 0, B = 1, C = 2, D = 3, E = 4, F = 5, G = 6, H = 7, I = 8, J = 9, K = 10
62}
63
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class Chart : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{
16
if (!IsPostBack)17
{18
SetChart(10, 0);19
}20
}21
22 //puma+1,blueshop-1
23
protected void Button1_Click(object sender, EventArgs e)24
{25
int cnt = int.Parse(this.Label1.Text);26
27 if (cnt != 10)
28
{29
cnt++;30
this.Label1.Text = cnt.ToString();31
this.Label2.Text = Convert.ToString(10 - cnt);32
SetChart(cnt, 10 - cnt);33
}34
35
}36
37 //blueshop+1,puma-1
38
protected void Button2_Click(object sender, EventArgs e)39
{40
int cnt = int.Parse(this.Label2.Text);41
42 if (cnt != 10)
43
{44
cnt++;45
this.Label2.Text = cnt.ToString();46
this.Label1.Text = Convert.ToString(10 - cnt);47
SetChart(10 - cnt, cnt);48
}49
}50
51 protected void SetChart(int puma, int blueshop)
52
{53
this.Image1.ImageUrl = string.Format("http://chart.apis.google.com/chart?cht=p3&chd=s:{0}{1}&chs=300x100&chl=puma|blueshop", Enum.GetName(typeof(code), puma), Enum.GetName(typeof(code), blueshop));54
}55
}56
57 //A=0,B=1....K=10,請參考google chart
58
//http://code.google.com/apis/chart/59
enum code60
{61
A = 0, B = 1, C = 2, D = 3, E = 4, F = 5, G = 6, H = 7, I = 8, J = 9, K = 1062
}63
執行結果：
參考網址：http://code.google.com/apis/chart/