最近在 瓶水相逢.Net 繪圖的新利器 - Microsoft Chart Controls for .NET Framework 3.5 這篇文章看到了這個繪圖的好東西.趕緊下載來玩玩看,也在這邊留一下我自己的學習紀錄.
事前準備
- Visual Studio 2008 升級到sp1
- .Net Framework 3.0 升級到sp1
- 安裝 Microsoft Chart Controls for Microsoft .NET Framework 3.5
開發網站發佈的Server也需要安裝此項目. - 安裝 Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
有安裝此項目才有辦法在VS2008裡面拖曳控制項還有IntelliSense.
Microsoft Chart Controls 網路資料
- Microsoft Chart Controls for .NET Framework Documentation
- Samples Environment for Microsoft Chart Controls
範例非常的多,建議大家如果跟我一樣沒使用過類似的東西,可以下載回去邊看邊學速度會快很多
有分Web跟Windows Form兩種Sample. - MSDN上的論壇
Web基本操作心得
- 構成介紹
上圖由官方Web Sample中取得,很清楚的將整個圖表的構成做了一些分類,我再補充備註一下
整個圖型有被標著出來的部分都是個別的類別物件,而Chart Control (Chart Picture) 就如同網業一般,可以將各個物件分別得透過新增的方式新增至圖型裡面.類似Page.Control.Add(Control)這種意思~~~
大概的階層關係為 Chart Control ==> ChartArea ==> Series ==> Point
而由左而右皆可為一對多的關係,由這些項目自身的一些設定構成了一張圖 ps.Sorry 這是我個人的想法,如果有錯麻煩各位先進跟我說一下.
- 簡單Sample
- 拉一個Button 跟 Chart 到 Design 畫面
不過由於我想從程式來建ChartArea跟Series所以我就先將自動產生的Series1跟ChartArea1移除
<head runat="server">
<title>Chart_Test2</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<br />
<asp:Chart ID="Chart1" runat="server" Height="500px" Width="800px">
</asp:Chart>
</div>
</form>
</body>
</html>
- 填入程式碼至Button Click事件
try
{
#region Step1. 設定 Chart Title
Title ChartTitle = new Title();
System.Drawing.Font font = new System.Drawing.Font("標楷體", 20);
ChartTitle.Font = font;
ChartTitle.ForeColor = System.Drawing.ColorTranslator.FromHtml("#6B8E23");
ChartTitle.Text = "Sample圖表";
//新增至Chart Control
Chart1.Titles.Add(ChartTitle);
#endregion
#region Step2. 產生工作區塊(Area1)
ChartArea cArea1 = new ChartArea("Area1");
//設定Area1的X,Y軸標題
cArea1.AxisX.Title = "時刻";
cArea1.AxisY.Title = "數量";
//X,Y軸刻度區間
cArea1.AxisX.Interval = 2;
cArea1.AxisY.Interval = 10;
#region Step2.1 產生Area1的Series
#region Series1填入資料
List<string> lstX1 = new List<string>();
List<string> lstY1 = new List<string>();
Random r1 = new Random((int)DateTime.Now.Ticks);
for (int i = 1; i < 24; i++)
{
lstX1.Add(i.ToString());
}
for (int i = 1; i < 24; i++)
{
int x = r1.Next(0, 100);
lstY1.Add(x.ToString());
}
#endregion
#region series1
Series series1 = new Series("種類A");
//設定要顯示在哪一個ChartArea
series1.ChartArea = "Area1";
//設定圖表種類
series1.ChartType = SeriesChartType.Column;
//是否將值show在value label上
series1.IsValueShownAsLabel = true;
//填入資料
series1.Points.DataBindXY(lstX1, lstY1);
#endregion
#region Series1填入資料
List<string> lstX2 = new List<string>();
List<string> lstY2 = new List<string>();
Random r2 = new Random(((int)DateTime.Now.Ticks) + 1);
for (int i = 1; i < 24; i++)
{
lstX2.Add(i.ToString());
}
for (int i = 1; i < 24; i++)
{
int x = r2.Next(0, 100);
lstY2.Add(x.ToString());
}
#endregion
#region series2
Series series2 = new Series("種類B");
//設定要顯示在哪一個ChartArea
series2.ChartArea = "Area1";
//設定圖表種類
series2.ChartType = SeriesChartType.Spline;
//是否將值show在value label上
series2.IsValueShownAsLabel = true;
//填入資料
series2.Points.DataBindXY(lstX2, lstY2);
series2.BorderWidth = 3;
#endregion
#endregion
#endregion
#region Step3. 設定Legend
Legend leg = new Legend("分類");
leg.Docking = Docking.Right;
Chart1.Legends.Add(leg);
#endregion
Chart1.ChartAreas.Add(cArea1);
Chart1.Series.Add(series1);
Chart1.Series.Add(series2);
}
catch (Exception ex)
{
Response.Write(ex.Message.ToString());
}
- 執行結果
上面這最簡單的一種效果,有幾點問題要注意
- 不是每一種圖型都可以重疊在同一個ChartArea上面
- BorderWidth的設定不一定對各種圖型都有效果,目前只知道對線圖有效果
希望之後我能多試幾種圖型以及圖行互動的功能出來跟大家分享
這次微軟真的送了我們一個好東西,只不過很多企業連 .Net Framework2.0 都還沒摸透就要說服他們換 .Net Framework3.5 似乎有點困難
希望大家使用愉快
===========================這是簽名檔分隔線==============================
我沒有甚麼技術能力
不過卻希望在這邊跟大家分享自己遭遇的一些問題
希望大家有更好的方法可以跟我說!!
======================================================================
posted on |
2008/11/22 00:01
2 人收藏
3 人推薦
我要推薦
|
閱讀數 : 6030
|
文章分類 [
ASP.NET
]
|
訂閱