Author: Runner from: yesky
The bar map is sometimes referred to as "bar" map. In my previous article, "In the ASP.NET Implementation Data Chart" has already introduced the chart seen in the browser, generally the picture file. So do you also generate these charts in ASP.NET? The answer is certain because there is a new feature in ASP.NET, which can be drawn according to the pattern of the chart to be implemented, and finally form a picture in the client's browser, showing Chart is coming. Based on the previous article, this article further introduces the specific method of implementing the BAR chart in the ASP.NET page. I hope this article will not only let you understand the powerful drawing function in the ASP.NET, but also hope to make up for a shortcomings of the previous article, that is, the data of the previous chart comes from fixed value, and we know that the chart is only Once the database is associated, it is possible to show a more powerful advantage. Here is to introduce data from the database from the database in the ASP.NET page, and the specific implementation of the BAR chart is formed in this data. One. This article is designed and running software environment: (1). Microsoft Window 2000 Server Edition. (2) .visual studio .NET official version, .NET Framework SDK version number 3705. (3). MDAC 2.6 (Microsoft Data Acess Component) or above. Two. The establishment of the data source For convenience, the database type selected herein is the local database --Access 2000, if you use other database types, just modify the code about the database connection in the program described below. . The Access database name is "db.mdb", and only one data table "Table01" is defined in this database, and the structure of this table is shown in Table 01:
Field Name Type Description Id Auto Number Programming, increment YF Digital Sale SL Digital Sales
Table 01: Table01 Data Sheet Structure After defining the "Table01" data table in the "DB.mdb" database, add a record in Table01 data sheet:
ID YF SL1 1 122 2 53374 4 205 5 166 6 107 7 198 8 899710 10 1311 11 1112 12 15
Table 02: Table01 Data table In the Table01 data table, after the 12 records are added, save the "db.mdb" database to the root directory of the C drive.
three. The key steps for implementing the data bar chart in the ASP.NET page: Implementation of data BAR charts in the ASP.NET page must first solve the two major problems: (1). To resolve database connections in the ASP.NET page And methods of reading data from the database. The program is to implement reading data from one article in the database, and the OLEDBDataReader class provides a method of reading data from the database. The following code is the "db.mdb" database in the root directory of the C drive, read the record in the Table01 data table one by one, and store the data to the defined two arrays:
String SROUTER = "C: DB.mdb"; // Get the current Access database in the absolute path of the server side string strcon = "provider = microsoft.jet.oledb.4.0; data source =" snrouter; // Create a database connection OLEDBCONNECTION myConn = new OleDbConnection (strCon); string strCom = "SELECT YF, SL FROM Table01 ORDER BY YF"; myConn.Open (); OleDbCommand myCommand = new OleDbCommand (strCom, myConn); OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader (); / / Create an OLEDBDataReader instance, and use this instance to get the record data int [] ixiaosh = new int [12] in the database; // define an array to store sales data String data from the database [] smoth = NEW STRING [12]; // Defines an array to store the sales month INDEX = 0 from the database from the database; while (myoledbdatareader.read ()) {ixiaosh [IIndex] = myoledbdatareader.Getint32 (1); smoth [IIndex] = myoledbdatareader.getInd32 (0). TOSTRING () "Month"; IIDex ;} // Read the data in the Table01 data table, and store myConn. Close () in the previously defined two arrays. MyoledBDataReader. Close (); // Turns off various resources (2). Draw images according to obtaining data, and displayed:
By the first step, the data from the database has been stored in the "Ixiaosh" and "SMOTH" arrays. Below you must solve the Bar map based on these data? First, let's take a look at the image of the data BAR map to be implemented in the ASP.NET page. Specifically, as shown in Figure 01:
Figure 01: Data BAR diagram implemented in ASP.NET
The various elements of Figure 01 are divided into five parts according to the region, and these five parts will be implemented in the programs described later:
Building the entire picture
First create a Bitmap instance and build a Graphics instance, and the Graphics instance provides a variety of drawings, so that you can draw a variety of graphics on the Bitmap instance according to the requirements of the data. The following code is to create a BitMap instance in ASP.NET, and build a specific method of the Graphics instance with this instance:
Bitmap BM = New Bitmap (600, 250); // Create a BitMap instance for a length of 600, broadband 250, GRAPHIC instance G. Clear (BM); // Color. Snow); // Fill this painting map with Snow color
2. Title section of Figure 01 Text:
This is to draw the specified string in the specified position by the DrawString method provided in the Graphics instance. The role of the following code is to draw the title of Figure 01: g. DrawString ("×× company ×× 200 200 2002 sales list", New Font ("Song, 16), Brushes. Black, New Point (5, 5) ); // Draw the specified string with the specified font, specified color in the specified position of the drawing. That is the chart title
3. The prompt area in Figure 01, that is, the content displayed in the upper right corner of Figure 01:
To draw this part of the content first to be positioned, you can divide this part to draw the content to three small parts:
First, it is "unit: 10,000 sets" in Figure 01, this part is relatively simple, and when the text coordinate to be output in the picture, call the DrawString method provided in the Graphics instance;
Second, it is to draw the small square in Figure 01. First, to call the DrawRectangle method in the Graphics instance, in the specified position, draw the specified size, then the FillRectangle in the graphics instance fill this small square to complete a;
The third is to draw the text on the right side of the small square. Also use the DrawString method provided in the Graphics instance, only the position coordinates and fonts should be changed. The following code function is to draw the content displayed in the upper right corner of Figure 01:
Point MyRec = New Point (535, 30); Point MyDec = New Point (560, 26); // The above is drawing the positioning g. DrawString ("Units: 10,000 set" in Figure 01, New Font ("Song Body ", 9), brushes. Black, New Point (525, 12)); for (int i = 0; i 4. Draw data BAR diagram based on data read from the database: This section is similar to the third portion, the most important difference is that the location of the drawing is different, the following code is drawn in Figure 01, and prompts the number represented by the BAR figure: INT iBARWIDTH = 40; int scale = 10; for (int i = 0; i Draw a picture border, the DrawRectangle method in the Graphics instance used. As for the JPEG format file displayed on the client, it is because the JPEG file occupies a small space, which is good for network transmission. The following code is the border in Figure 01 and forms a JPEG file: Pen P = New Pen (Color.Black, 2); g. DrawRectangle (P, 1, 1, 598, 248); Bm.Save (Response. OutputStream, Imageformat. JPEG); four. ASP.NET page implements data BAR diagram implementation steps: After mastering the key steps above and its solution, the ASP.NET implementation data bar is relatively easy, the following is the specific implementation step of implementing the data bar chart in the ASP.NET page, which is selected on the development tool is Visual Stuido. The .NET Enterprise build version, the development language used is C #. Launch Visual Studio .NET 2. Select the menu [File] | [New] | [Project], pop up the [New Project] dialog 3. Set the [Project Type] to [Visual C # item] 4. Set [Template] to [ASP.NET Web Application] 5. Enter "http: // localhost / bar" in the text box of [Position]. Then click the [OK] button, so that the Visual Studio .NET will create a name "BAR" folder in the directory where the current project file is located, store the project file of this project, the location of other files in the project stores It is a folder in the directory where the computer Internet information service is located in the directory where the Web site is located in the folder named "BAR". Specifically, as shown in Figure 02: Figure 02: New ASP.NET Project Dialog 6. Switch the current window of Visual Studio .Net to the WebForm's code editing window, that is, the edit window of the WebForm1.aspx.cs file. 7. In the first part of the WebForm1.aspx.cs file, replace the code to import namespace in WebForm1.aspx.cs with the following code: using System;. using System Collections;. using System ComponentModel; using System Data;. using System Drawing;. using System Web;... using System Web SessionState;.. using System Web UI;... using System Web UI WebControls UIING SYSTEM. Web. ui. htmlcontrols; using; // The namespace where the ImageFormat class used in the next program is located Using System. Data. OLEDB; // Used in the following program About the database Namespace 8. Add the following code in the webform1.aspx.cs file, the following code is to open the database, read the data, and form data BAR diagram in this data: String SROUTER = "C: DB.mdb"; // Get the current Access database in the absolute path of the server side string strcon = "provider = microsoft.jet.oledb.4.0; data source =" snrouter; // Create a database connection OLEDBCONNECTION myConn = new OleDbConnection (strCon); string strCom = "SELECT YF, SL FROM Table01 ORDER BY YF"; myConn.Open (); OleDbCommand myCommand = new OleDbCommand (strCom, myConn); OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader (); / / Create an OLEDBDataReader instance, and use this instance to get the record data int [] ixiaosh = new int [12] in the database; // define an array to store sales data String data from the database [] smoth = NEW STRING [12]; // Defines an array to store the sales month INDEX = 0 from the database from the database; while (myoledbdatareader.read ()) {ixiaosh [IIndex] = myoledbdatareader.Getint32 (1); smoth [IIndex] = myoledbdatareader.getInd32 (0). TOSTRING () "Month"; IIDex ;} // Read the data in the Table01 data table, and store myConn. Close () in the previously defined two arrays. MYOLDBDATAREADER. Close (); // Turns off various resources Bitmap BM = New Bitmap (600, 250); // Create a Bitmap instance of a length of 600, broadband is 250, G = graphics.fromage (bm); // This Bitmap instance creates a Graphic instance g. Clear Color. Snow); // Fill this painting map with Snow Color as the background colors. DrawString ("×× company ×× 200 2002 sales list", New Font ("Song", 16), Brushes. Black, New Point (5, 5)); // Draw the specified string with the specified font, specified color in the specified position of the drawing. That is, the chart title // The following code is to implement the upper right of the upper right of Figure 01 Point MyRec = New Point (535, 30); Point MyDec = New Point (560, 26); // The above is drawn in Figure 01 Positioning g. DrawString ("Unit: Ten", New Font ("Song", 9), Brushes. Black, New Point (525, 12)); for (INT i = 0; I private Color GetColor (int itemIndex) {Color MyColor; int i = itemIndex; switch (i) {case 0:. MyColor = Color Cornsilk; return MyColor; case 1: MyColor = Color Red; return MyColor; case 2:. MyColor = Color. Yellow; Case 3: MyColor = Color; Peru; Return MyColor; Case 4: MyColor = Color; Orange; Return MyColor; Case 5: MyColor = Color; Case 6: MyColor = Color. Gray; return MyColor; case 7:. MyColor = Color Maroon; return MyColor; case 8: MyColor = Color Azure; return MyColor; case 9:. MyColor = Color.AliceBlue; return MyColor; case 10: MyColor = Color Bisque;. Return mycolor; case 11: mycolor = color. burlywood; return mycolor; case 12: mycolor = color; chartreuse; return mycolor; default: mycolor = color; green; return mycolor;}} 10. To this, in the above steps After that, all the work that implements the data bar chart in the ASP.NET page is complete. After determining the above established Access database "db.mdb" in the root directory of the C disk, click the shortcut key F5, you can get the data BAR map shown in Figure 01. Fives. to sum up: In the ASP.NET page implements various charts, it is the drawing function of ASP.NET, and this feature is not available in the previous version of ASP.NET. The above introduction, not only describes the method of drawing various pictures in ASP.NET, but also describes the database connection and reading the record from the database. These methods are very useful for your understanding and mastering in ASP.NET. In the next article, another chart-pie chart that is often seen in the browser is introduced, and the implementation method in the ASP.NET page. If you are interested, let's take a goodbye!
