We know ASP. net is a compilation language. When the client calls ASP. NET for the first time. NET page is actually a complicated compilation process, compilation and production of msil files, storage to local machines, msil files are actually an intermediate language file, then, this file is re-compiled through the JIT (Just In Time) compiler to generate a machine language. In this way, you can call ASP. net pages are displayed. Different machines have different JIT and are compiled into different machine languages. This is why Microsoft strongly advocates ASP. net.
| [Blocked ads] |
When the ASP. NET page is compiled into a msil file, the class library used for compilation must be managedCodeThe ActiveX control is a file that has been compiled into a machine language. It is an unmanaged code file ). Therefore, it is impossible to directly call the mschart component in ASP. NET. Although you can use. the tool provided by the. NET Framework converts this mschart component into a managed code file. However, this process is relatively complicated and the chart generated using this method is quite slow, in addition, it is restricted by the mschart component itself and cannot be used to generate complex charts.
This document uses the stock market chart as an example to describe how to implement the chart in ASP. NET. In fact, the market chart we see is not a chart, but an image. This article describes how to generate images on the server, draw various information on the images to be displayed to the user, and then send the images to the client through a browser to form a chart. Although this method is complicated to implement, it is flexible and practical, especially for charts on the Internet. The following describes the specific implementation method.
I.ProgramDesign and Operation Environment
(1). Microsoft Windows 2000 Server Edition
(2). Net Framework SDK beta 2 or later
2. Key Steps and solutions for implementing data charts in ASP. NET:
The key steps for drawing a chart on the ASP. NET page are as follows: 1. Create an image object (Bitmap ). Then, use the method provided by the. NET Framework SDK to draw the desired image on the image object, such as draw lines and points. The second is to save and display the image object in "Jpeg" format for better transmission. Next, let's take a look at the specific implementation methods of these two steps.
(1) first, let's take a look at how to create a dynamic image on the ASP. NET page and display it.
Creating an image object is actually very easy. It is implemented using the "bitmap" Class in the namespace "system. Drawing". The following statements can be used to 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. You can use the Save method of the bitmap class to display the created bitmap objects. Bitmap files occupy a lot of space. To facilitate network transmission, they are generally converted to "Jpeg" or "GIF" files for persistence. The following statement converts a created bitmap object to a "Jpeg" file for display:
| // Save the image object in "Jpeg" format and display it on the client Image. Save (response. outputstream, imageformat. JPEG ); |
With a slight modification, you can display the bitmap object as a "GIF" file, as shown below:
| // Save the image object in "Jpeg" format and display it on the client Image. Save (response. outputstream, imageformat. GIF ); |
The following code (chart3.aspx) is used to dynamically create and display an image in ASP. NET:
| <% @ 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) { // Create a "bitmap" Object Bitmap image = new Bitmap (400,400 ); // Save the image object in "Jpeg" format and display it on the client Image. Save (response. outputstream, imageformat. JPEG ); } </SCRIPT> </Head> <Body> </Body> </Html> |
The following is the interface after the code is run:
Figure 01: use ASP. NET to dynamically create images
A black image is generated, which is not very beautiful. Here we will color the image, draw lines, and write on it.
(2) How to color the generated image:
In fact, it is easier to color the generated image. First, create a "graphic" object based on the "bitmap" object, then, the graphic type of the colored image is determined based on the method of the graphic object (for example, the displayed image is an elliptic or square ). The following code (chart4.aspx) is used to make the image generated by chart3.aspx light green:
| [Blocked ads] |
| <% @ 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) { // Create a "bitmap" Object Bitmap image = new Bitmap (400,400 ); Graphics G = graphics. fromimage (image ); G. fillrectangle (New solidbrush (color. lightgreen), 0, 0,400,400 ); // Save the image object in "Jpeg" format and display it on the client Image. Save (response. outputstream, imageformat. JPEG ); } </SCRIPT> </Head> <Body> </Body> </Html> |
Is the chart4.aspx running interface:
Figure 02: color the generated image
Of course, you can not only customize the color of the generated image, but also customize the shape of the generated image. The function of the following code segment is to customize the shape of the image to be elliptical:
| <% @ 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) { // Create a "bitmap" Object Bitmap image = new Bitmap (400,400 ); Graphics G = graphics. fromimage (image ); G. fillrectangle (New solidbrush (color. lightgreen), 0, 0,400,400 ); // Save the image object in "Jpeg" format and display it on the client Image. Save (response. outputstream, imageformat. JPEG ); } </SCRIPT> </Head> <Body> </Body> </Html> |
Is the running interface of this Code:
Figure 03: custom image shape
Of course, you can also use other methods of the "graphic" object to customize the image into other shapes, which will not be described one by one.
3) how to draw lines and write on images:
Writing on an image is implemented through the drawstring () method of the generated "graphic" object. Before calling this method, you must set the font and brush. The specific call method is as follows:
| [Blocked ads] |
| Public void drawstring ( String s, Font font, Brush, Float X, Float y ); |
"S" is the string to be output, "font" is the font of the string, "brush" is the definition brush, and the next two parameters are the coordinates of the generated string. The specific statement for generating strings in a program is as follows:
| Font axesfont = new font ("Arial", 10 ); Brush blackbrush = new solidbrush (color. Red ); G. drawstring ("write text on the image, haha", axesfont, blackbrush, 90, 20 ); |
To draw a line on an image, use the drawline () method of the "graphic" object. The usage syntax is as follows:
| Public void drawlines ( Pen, Point [] points ); |
"Points" defines the position of a vertex. Of course, you can also use the method used in this article to call it, that is, to define each line, so that I feel more convenient. Below are three lines drawn on the generated image:
| Pen redpen = new pen (color. Red, 1 ); Pen blackpen = new pen (color. Blue, 2 ); // The following statement draws various lines on the image object and defines the line width, start point, and end point. G. drawline (blackpen, 0, 2,210,250 ); G. drawline (blackpen, 210,250,310, 50 ); G. drawline (redpen, 310, 50,210,350 ); |
With these basic knowledge, it is easier to customize the image shape and color the image. The function of the following code (chart2.aspx) is to create a square image, draw a line, write, and color on the image as follows:
<% @ Page Language = "C #" contenttype = "image/JPEG" %>
|
3. Complete data charts in ASP. NETSource codeAnd running interface:
After mastering the basic operations of generating images, coloring images, outputting characters on images, and drawing lines, you can make full use of various basic operations in ASP. the complete program for implementing data charts in. NET is the running interface:
| [Blocked ads] |
Figure 05: running interface of data charts in ASP. NET
The complete code (chart1.aspx) for implementing data charts in ASP. NET is 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 = "Implementing Data charts in 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;
}
// Initialization
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 );
// Create the image size first
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 );
// Write the text on the Image
G. drawstring (title, new font ("Arial", 14), blackbrush, width/3, 10 );
// Write the X tag along the X coordinate
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 );
}
// Write the y tag along the Y coordinate
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 );
// Plot the data in the chart
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, view the image
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 = "Implementing Data charts in ASP. NET ";
C. xorigin = 0; C. scalex= 500; C. xdivs = 5;
C. yorigin = 0; C. scale= 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>
4. Summary:
The implementation of charts is always a challenge in Internet programming. This article describes how to implement data charts on the ASP. NET page and use them without any good components. Net Framework sdk gdi + provides a variety of methods for operating graphics. Such a process is a bit complex, but it is very useful for implementing complex charts. It is hoped that this article will not only help readers solve the problem of charts on the Internet, but also provide readers with a certain understanding of GDI +.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
