ASP.NET實現資料圖表1

asp.net|資料|圖表 三．在ASP.NET中實現資料圖表的完整原始碼和運行介面：

　　在掌握了產生圖片，在給圖片上色、在圖片上輸出字元、和畫線等基本操作過以後，充分的利用各種基本操作，就可以得的在ASP.NET中實現資料圖表的完整程式，下圖是運行介面：

圖05：在ASP.NET中實現資料圖表的運行介面

　　下面是在ASP.NET中實現資料圖表的完整代碼（chart1.aspx），如下：

＜%@ Import Namespace = "System" %＞＜%@ Import Namespace = "System.Drawing" %＞＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞＜%@ Import Namespace = "System.Drawing.Imaging" %＞ ＜script language = "C#" runat = "server" ＞class LineChart{public Bitmap b ;public string Title = "在ASP.NET中實現資料圖表" ;public ArrayList chartValues = new ArrayList ( ) ;public float Xorigin = 0 , Yorigin = 0 ;public float ScaleX , ScaleY ;public float Xdivs = 2 , Ydivs = 2 ;private int Width , Height ;private Graphics g ;private Page p ;struct datapoint {public float x ;public float y ;public bool valid ;}//初始化public LineChart ( int myWidth , int myHeight , Page myPage ) {Width = myWidth ; Height = myHeight ;ScaleX = myWidth ; ScaleY = myHeight ;b = new Bitmap ( myWidth , myHeight ) ;g = Graphics . FromImage ( b ) ;p = myPage ;}public void AddValue ( int x , int y ) {datapoint myPoint ;myPoint . x = x ;myPoint . y = y ;myPoint . valid = true ;chartValues . Add ( myPoint ) ;}public void Draw ( ) {int i ;float x , y , x0 , y0 ;string myLabel ;Pen blackPen = new Pen ( Color . Blue , 2 ) ;Brush blackBrush = new SolidBrush ( Color . Black ) ;Font axesFont = new Font ( "arial" , 10 ) ;//首先要建立圖片的大小p . Response . ContentType = "image/jpeg" ;g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , Width , Height ) ;int ChartInset = 50 ;int ChartWidth = Width - ( 2 * ChartInset ) ;int ChartHeight = Height - ( 2 * ChartInset ) ;g . DrawRectangle ( new Pen ( Color . Black , 1 ) , ChartInset , ChartInset , ChartWidth , ChartHeight ) ;//寫出圖片上面的圖片內容文字g . DrawString ( Title , new Font ( "arial" , 14 ) , blackBrush , Width / 3 , 10 ) ;//沿X座標寫入X標籤for ( i = 0 ; i ＜= Xdivs ; i++ ) {x = ChartInset + ( i * ChartWidth ) / Xdivs ;y = ChartHeight + ChartInset ;myLabel = ( Xorigin + ( ScaleX * i / Xdivs ) ) . ToString ( ) ;g . DrawString ( myLabel , axesFont , blackBrush , x - 4 , y + 10 ) ;g . DrawLine ( blackPen , x , y + 2 , x , y - 2 ) ;}//沿Y座標寫入Y標籤for ( i = 0 ; i ＜= Ydivs ; i++ ){x = ChartInset ;y = ChartHeight + ChartInset - ( i * ChartHeight / Ydivs ) ;myLabel = ( Yorigin + ( ScaleY * i / Ydivs ) ) . ToString ( ) ;g . DrawString ( myLabel , axesFont , blackBrush , 5 , y - 6 ) ;g . DrawLine ( blackPen , x + 2 , y , x - 2 , y ) ;}g . RotateTransform ( 180 ) ;g . TranslateTransform ( 0 , - Height ) ;g . TranslateTransform ( - ChartInset , ChartInset ) ;g . ScaleTransform ( - 1 , 1 ) ;//畫出圖表中的資料datapoint prevPoint = new datapoint ( ) ;prevPoint . valid = false ;foreach ( datapoint myPoint in chartValues ) {if ( prevPoint . valid == true ) {x0 = ChartWidth * ( prevPoint . x - Xorigin ) / ScaleX ;y0 = ChartHeight * ( prevPoint . y - Yorigin ) / ScaleY ;x = ChartWidth * ( myPoint . x - Xorigin ) / ScaleX ;y = ChartHeight * ( myPoint . y - Yorigin ) / ScaleY ;g . DrawLine ( blackPen , x0 , y0 , x , y ) ;g . FillEllipse ( blackBrush , x0 - 2 , y0 - 2 , 4 , 4 ) ;g . FillEllipse ( blackBrush , x - 2 , y - 2 , 4 , 4 ) ;}prevPoint = myPoint ;}//最後以圖片形式來瀏覽b . Save ( p . Response . OutputStream , ImageFormat . Jpeg ) ;}~LineChart ( ) {g . Dispose ( ) ;b . Dispose ( ) ;}}void Page_Load ( Object sender , EventArgs e ) {LineChart c = new LineChart ( 640 , 480 , Page ) ;c . Title = " 在ASP.NET中實現資料圖表" ;c . Xorigin = 0 ; c . ScaleX = 500 ; c . Xdivs = 5 ;c . Yorigin = 0 ; c . ScaleY = 1000 ; c . Ydivs = 5 ;c . AddValue ( 0 , 150 ) ;c . AddValue ( 50 , 50 ) ;c . AddValue ( 100 , 700 ) ;c . AddValue ( 200 , 150 ) ;c . AddValue ( 300 , 450 ) ;c . AddValue ( 400 , 75 ) ;c . AddValue ( 450 , 450 ) ;c . AddValue ( 500 , 250 ) ;c . Draw ( ) ;}＜/script ＞




　　四． 總結：

　　實現圖表始終是互連網編程的一個痛點，本文介紹了在ASP.NET頁面中如何?資料圖表，在沒有什麼好的組件可以利用的前提下，利用.Net FrameWork SDK GDI＋中提供的各種用以操作圖形的方法，這樣的過程雖然有點煩雜，但對實現複雜的圖表是非常有用的。希望本文不僅能夠協助讀者解決在互連網上的圖表問題，也能夠對讀者的針對GDI+也有所瞭解。