asp.net realizes data chart

To insert a chart in ASP, the commonly used method is to use the MSChart control. So is it the same in ASP.NET? The answer is no.

　　We know that ASP.NET is a compiled language. When a client calls an ASP.NET page for the first time, it actually goes through a more complicated compilation process. The MSIL file is compiled and stored on the local machine. The MSIL file is actually It is an intermediate language file, and then this file is recompiled by a JIT (Just in time) compiler to generate machine language, so that the ASP.NET page you call is displayed. For different machines, there are different JITs. , It is compiled into different machine languages. This is the so-called cross-platform principle that Microsoft strongly advocates ASP.NET.

　　When an ASP.NET page is compiled into a MSIL file, the class library used for compilation must be a managed code file (Managed Code), and ActiveX controls are files that have been compiled into machine language, which belong to unmanaged code files. (Unmanaged Code). So it is impossible to call MSChart component directly in ASP.NET. Although you can use the tools provided by the .Net framework to convert this MSChart component into a managed code file, the process is relatively complicated, and the chart generated by this method is quite slow, and it is limited by the MSChart component itself. For complex charts, he cannot be used to generate them.

　　This article will take the stock market chart as an example to introduce how to implement the chart in ASP.NET. In fact, the market chart we see is not a chart, but a picture. Generate a picture on the server side, and then draw various information that you want to display to the user on the picture, and then send the picture to the client through the browser to form a chart. This is the method to be discussed in this article. Although this method is more complicated to implement, it is flexible and very practical. It is especially suitable for charts on the Internet. The specific implementation method will be introduced below.

　　One. Program design and operating environment introduced in this article

　　(1). Microsoft Windows 2000 Server Edition

　　(2)..Net Framework SDK Beta 2 and above

　　two. The key steps and solutions to realize data charts in ASP.NET:

　　There are two key steps to draw a chart in an ASP.NET page. One is to create a picture object (Bitmap). Then use the methods provided by the .Net FrameWork SDK to draw the graphics you want on this picture object, such as drawing lines, drawing points, etc. Secondly, in order to be more suitable for transmission, save this picture object in "Jpeg" format and display it. Let's take a look at the specific implementation method of these two steps.

　　(1). First, let's take a look at how to create a dynamic picture on the ASP.NET page and display it.

　　It is actually very easy to create a picture object. It is realized by using the "Bitmap" class in the namespace "System.drawing". The following statement can create a bitmap object:

//Create a "Bitmap" object Bitmap image = new Bitmap (400, 400 );

　　Modify the two parameters of the "Bitmap" object to change the length and width of the created bitmap object. The Bitmap object that has been created can be displayed through the Save method of the Bitmap class. Since bitmap files take up a lot of space, in order to facilitate network transmission, they are generally converted into "Jpeg" or "Gif" files to save. The following statement converts the created bitmap object into a "Jpeg" file for display:

//Save this image object in "Jpeg" format and display it on the client side image. Save (Response. OutputStream, ImageFormat. Jpeg );

　　With a little modification, the bitmap object can be displayed as a "Gif" file, as follows:

//Save this image object in "Jpeg" format and display it on the client side image. Save (Response. OutputStream, ImageFormat. Gif);

　　The function of the following code (chart3.aspx) is that ASP.NET dynamically creates a picture and displays it:

　　The following is the interface after this code runs:

　　　　　　　　Figure 01: Use ASP.NET to dynamically create pictures

　　What is produced is a black picture, which is very unsightly. Let’s color the picture and draw lines and write on the picture.

(2). How to color the generated pictures:

　　In fact, it is relatively easy to color the generated picture. First, create a "Graphic" object based on the "Bitmap" object, and then determine the type of graphics to be colored according to the method of the "Graphic" object (for example, the displayed picture is an ellipse or a square Wait). The function of the following code (chart4.aspx) is to add light green to the picture generated by the chart3.aspx code:

　　The following figure is the interface of chart4.aspx running:

　　　　　　　 Figure 02: Color the generated picture

　　Of course, you can not only customize the color of the generated picture, but also customize the shape of the generated picture. The function of the following code snippet is to customize the shape of the picture as an ellipse:

　　The following figure is the running interface of this code:

　　　　　　　　Figure 03: Customize the shape of the picture

　　Of course, you can also use other methods of the "Graphic" object to customize the picture into other shapes, which will not be introduced one by one.

(3). How to draw lines and write on the picture:

　　Writing on a picture is achieved by the DrawString () method of the generated "Graphic" object. Before calling this method, the font and brush must be set. The specific calling method is:

public void DrawString ( string s ,Font font ,Brush brush ,float x ,float y) ;

"s" is the string to be output, "font" is the font of the string, "brush" is the definition of the brush, and the next two parameters are the coordinates of the position where the string is generated. The specific statements to generate strings in the program are as follows:

Font axesFont = new Font ( "arial ", 10); Brush blackBrush = new SolidBrush (Color Red.);. G DrawString ( " picture writing text above, Oh", axesFont, blackBrush, 90, 20);
　
　　To To draw a line on a picture, use the DrawLine () method of the "Graphic" object. The specific usage syntax is as follows:

public void DrawLines (Pen pen ,Point [ ] points) ;

　　Among them, "points" is to define the position of the point. Of course, you can also use the method used in this article to call it, which is to define each line drawn, so I feel more methodical. Below are three lines drawn on the generated picture:

Pen redPen = new Pen (Color. Red, 1) ;Pen blackPen = new Pen (Color. Blue, 2) ;//The following sentence is to draw various lines on this picture object, you can define the thickness of the line, the starting point, End point, etc. g. DrawLine (blackPen, 0, 2, 210, 250 ); g. DrawLine (blackPen, 210, 250, 310, 50 ); g. DrawLine (redPen, 310, 50, 210, 350);

　　Knowing these basic knowledge, it is easier to customize the shape of the picture, color the picture, write on the picture, and draw lines. The function of the code below (chart2.aspx) is to customize a square picture and draw lines on the picture. , Writing and painting, as follows:

＜%@ Page Language = "C#" ContentType = "image/jpeg" %＞＜%@ Import Namespace = "System" %＞＜%@ Import Namespace = "System.Drawing" %＞＜%@ Import Namespace = "System.Drawing.Drawing2D" %＞＜%@ Import Namespace = "System.Drawing.Imaging" %＞＜html ＞＜head ＞＜script language = "C#" runat = "server" ＞ void Page_Load ( object sender , EventArgs e ) { Bitmap image = new Bitmap ( 400 , 400 ) ;Font axesFont = new Font ( "arial" , 10 ) ;Brush blackBrush = new SolidBrush ( Color . Red ) ;Pen redPen = new Pen ( Color . Red , 1 ) ;Pen blackPen = new Pen ( Color . Blue , 2 ) ;Graphics g = Graphics . FromImage ( image ) ; g . Clear ( Color . White ) ; g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;//在此图片对象中画出图片,可以定义文字大小、位置、色彩等g .DrawString ("write text on the picture, haha", axesFont, blackBrush, 90, 20) ;//The following statement is to draw various lines on the picture object, and you can define the thickness, starting point, end point, etc. of the line. DrawLine (blackPen, 0, 2, 210, 250) ;g. DrawLine (blackPen, 210, 250, 310, 50) ;g. DrawLine (redPen, 310, 50, 210, 350) ;//In "Jpeg" format Save this image object and display it on the client // image. Save (Response. OutputStream, ImageFormat. Jpeg); image. Save (Response. OutputStream, ImageFormat. Jpeg);} ＜/script ＞＜/head ＞＜body ＞＜/body ＞＜/html ＞ImageFormat . Jpeg ) ; } ＜/script ＞＜/head ＞＜body ＞＜/body ＞＜/html ＞ImageFormat . Jpeg ) ; } ＜/script ＞＜/head ＞＜body ＞＜/body ＞＜/html ＞

　　　　　　　　Picture 04: Finish drawing lines, writing and coloring on the picture

three. Realize the complete source code and running interface of the data chart in ASP.NET:

　　After mastering the basic operations such as generating pictures, coloring pictures, outputting characters on pictures, and drawing lines, and making full use of various basic operations, you can get a complete program for realizing data charts in ASP.NET , The following figure is the running interface:

Figure 05: Implementation of the running interface of the data chart in ASP.NET

　　The following is the complete code (chart1.aspx) to implement the data chart in ASP.NET, as follows:

＜%@ 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 ;)//Finally browse in image form 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 = "Implement Data Charts in 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 ＞

　　four. to sum up:

　　Realizing charts is always a difficult point in Internet programming. This article introduces how to implement data charts in ASP.NET pages. Under the premise that there are no good components to use, use the various operations provided in the .Net FrameWork SDK GDI+ Graphical method. Although this process is a bit complicated, it is very useful for realizing complex charts. I hope this article can not only help readers solve the problem of diagrams on the Internet, but also understand the reader's GDI+.

asp.net realizes data chart

Guess you like