ASP.NET drawing full Raiders increasing web applications require a chart to perform data display and analysis. For example: voting results show that the company's production statistical display analysis and so on. With the chart to display data, it is intuitive, clear and other advantages. Traditional ASP technology is not supported, so you have to use Active X or Java Applets to implement this feature. Newly appeared ASP.NET solves this problem, as long as the class displayed in ASP.NET can draw a rich, dynamic chart (Figure 1). This article will tell how to use ASP.NET technology to combine ADO.NET technology to draw bar charts and pie charts. Figure 1 first creates a C # class library. Open vs.net, create a new class library project called Insight_CS.WebCharts, change the name of the solution to Insight, change the Class.cs file name to Insight_CS.WebCharts.cs, and finally open the Insight_CS.WebCharts.cs file.
The code is as follows: / * Custom class, by entering different parameters, these classes can draw different graphics * / using system; using system.io; // Used for file access using system.data; // Used for data Access using system.drawing; // Provide basic functions for painting GDI graphs Using system.drawing.text; // Provide advanced features for painting GDI graphs Using system.drawing.drawing2d; // Provide high-grade two-dimensional, vector graphics function Using System.Drawing.Imaging; // providing advanced graphics drawing function of GDI namespace Insight_cs.WebCharts {public class PieChart {public PieChart () {} public void Render (string title, string subTitle, int width, int height, DataSet chartData, Stream Target) {const INT SIDE_LENGTH = 400; const INT PIE_DIAMETER = 200; DATATABLE DT = chartdata.tables [0]; // Take the total base amount float sumdata = 0 in the pie chart by entering the parameters; Foreach (DataRow Dr In DT. Rows) {Sumdata = Convert.TOSINGLE (DR [1]);} // Generate an Image object, and thus generate a Graphics object Bitmap BM = new bitmap (width, height); graphics g = graphics.FromImage (BM ); // Set the attribute G.Scaletransform (Convert. Tosingle (Height)) / side_length) / sIDE_LENGTH); g.smoothingmode = SMO (CONVERT.TOSINGE (Width)) OtHingMode.default; g.TextRenderingHint = textrenderingHint.antialias; // Canvas and edge setting g.clear (color.White); g.drawRectangle (Pens.black, 0, 0, sIDE_LENGTH-1, SIDE_LENGTH-1); // Painted pie chart title G. DrawString (Title, New Font ("Tahoma", 24), Brushes.Black, New Pointf (5, 5)); // Painting Chart of the legend g.drawstring (Subtitle, New Font ("Tahoma", 14), Brushes.black, New Pointf (7,35)); // Painting Chart Float Curangle = 0; Float Totalangle = 0; for (INT I = 0; i g.FillPie (new SolidBrush (ChartUtil.GetChartItemColor (i)), 100,65, PIE_DIAMETER, PIE_DIAMETER, totalAngle, curAngle); g.DrawPie (Pens.Black, 100,65, PIE_DIAMETER, PIE_DIAMETER, totalAngle, curAngle); totalAngle = Curangle;} // Painting Maxel box and its text G.drawRectangle (Pens.Black, 200, 300, 199, 99); G.drawString ("Legend", New Font ("Taoma", 12, FontStyle.Bold), brushes. Black, New Pointf (200, 300)); // Painting Graphics Pointf Boxorigin = New Pointf (210, 330); Pointf TextORIGIN = New PointF (235, 326); float percent = 0; for (int i = 0; i Foreach (DATAROINT , 12, fontstyle.bold, brushes.black, new pointf (200, 300)); // Draw legend Pointf Boxorigin = New Pointf (210, 330); Pointf TextRigin = New PointF (235, 326); for (INT i = 0; i < Dt.Rows.count; i ) {g.fillRectangle (New SolidBrush (New SolidBrush (CHARTUTIL.GETCHARTEMCOLOR (I)), Boxorigin.x, Boxorigin.y, 20, 10); g.drawRectangle (Pens.Black, Boxorigin.x, Boxorigin .Y, 20, 10); g.drawstring (Dt.Rows [i] [0] .tostring () "-" dt.rows [i] [1] .tostring (), New Font ("tahoma" , 10), brushes.black, textorigin; Boxorigin.y = 15; TextORIGIN.Y = 15;} // Output graphic bm.save (target, imageformat.gif); // Resource recycling bm.dispose () ; g.Dispose ();}} public class ChartUtil {public ChartUtil () {} public static Color GetChartItemColor (int itemIndex) {Color selectedColor; switch (itemIndex) {case 0: selectedColor = Color.Blue; break; case 1: SELECTEDCOLOR = Color.red; Break; Case 2: SelectedColor = Color.Yellow; Break; Case 3: SelectedColor = Color .Purple; break;}}} code analysis: 1. Introducing some namespace using system; usingspace using system; usingspace using system; using system.io; // is introduced. // Used for data access Using system.drawing; // provides basic functions for drawing GDI graphs Using system.drawing.text; // Provides high-grade feature for painting GDI graphs Using system.drawing.drawing2d; // Provide high-grade two-dimensional , Vector graphics function Using system.drawing.imaging; // Advanced feature for drawing GDI graphics These Namespace will be applied later. 2. Customize a namespace for INSIGHT_CS.WEBCHARTS, including two classes of PieChart and Barchart, very clear, Class Piechart is built for painting charts, Class Barchart is built for drawing bar. Because Class Piechart and Class Barchar are almost, so we take the pie chart as an example for code analysis. 3. Class PIECHART establishes a method Render, which can contain some parameters. Briefly illustrate the following: Parameter title, representation of the big title text above the pie chart. Parameters Subtitle, indicating the small title text above the pie chart. Parameters width, Height, indicating the size of the entire graph. Parameter Chardata is a DataSet object instance for drawing it. The parameter Target is an instance of the Stream object and is used for graphics output. 4. In order to increase readability, some constants are defined: const Int Side_length = 400; // Canvas Side length const INT PIE_DIAMETER = 200; // Pie Diameter 5. Define a DataTable, which is a data table in the DataSet. Among them, the various data of the pie chart is stored. 6. By calculation, draw the total base sumdata in the pie chart. 7. Create a BitMap object that provides memory space for graphics to be created. And thus generate a Graphics object, which encapsulates the GDI draw interface. 8. Call the method of the Graphics object ScaleTransform (), which is used to set the graphical ratio. 9. Call Method SmoothingMode (), TextRenderingHint (), etc. to set the relevant properties of text and graphics. 9. Set the canvas and edges. 10. Set the text title, legend, painting pie, itself. 11. Via stream, send the contents of the graph to the browser. 12. Last recycling resources. The class of this painting pie chart is completed. The method of painting a bar chart and the method of painting the pie chart are similar, and it will not be disclosed here. Overall, it is difficult to build a picture of the drawing without what we think, and there is not a deep algorithm. In fact, the overall idea is as if we use a pen to draw a paper on paper. The key is the use and parameter settings of each method. We have completed the custom class of the pie chart and bar chart in front, and we will apply these classes. Use VS.Net to create a web application called Insight_CS and add it to the INSIGHT project. Delete the default WebForm1.aspx file, create a newly called Saleschart.aspx file. Open this file, replace the first line to: <% @ page contentty = "image / gif" language = "false" codebehind = "false" code = "inherits=" inSight_CS .Saleschart "%> Open the file saleschart.aspx.cs, where the code is as follows: use system; use system.data; use system.web; useing system.io; using system.data.sqlclient; using insight_cs.WebCharts; / / this is a custom namespace namespace Insight_cs {public class SalesChart: System.Web.UI.Page {public SalesChart () {Page.Init = new System.EventHandler (Page_Init);} private void Page_Load (object sender, System .Eventargs e) {// acquire data from the database, used to draw string sql = "SELECT" "year (sa.ord_date) AS [Year]," "SUM (SA.QTY) AS [qty]" "From" "Sales SA" "Inner Join Store ST On (sa.stor_id = st.stor_id)" "GROUP BY" "Year (sa.ord_date)" "Order by" "[Year]" String connectString = "password = Ben; user ID = sa; data source = localhost"; sqldataadapter Da = new SqldataAdapter (SQL, ConnectString); DataSet DS = New DataSet () Int rows = da.fill (DS, "chartdata"); // Set the type of generating diagram (PIE or BAR) String Type = ""; if (null == Request ["]"]) {type = " PIE ";} else {type = request [" type "]. TOSTRING (). TouPper ();} // set map size int width = 0; if (null == request [" width "]) {width = 400 } Else {width = convert.toint32 (Request ["Width"]); INT height = 0; if (null == request ["height"]) {height = 400;} else {height = convert.toint32 (Request ["Height"]);} // Settings Chart Title String Title = " "; If (null! = Request [" title "]) {title = Request [" title "]. Tostring ();} String subtitle ="; if (null! = Request ["subtitle"]) {subtitle = Request ["subtitle"]. TOSTRING ();} {copy {switch (type) {case "Pie": PieChart PC = New Piechart (); pc.render (Title, Subtitle, Width, Height, DS , Response.OutputStream; Break; Case "BAR": BARCHART BC = New Barchart (); Bc.Render (Title, Subtitle, Width, Height, DS, Response.OutputStream); Break; default: Break;}}} private Void Page_init (Object Sender, Eventargs E) {/// Codegen: this call is required by the ASP.NET Web Form Designer. // InitializeComponent ();} #Region Web Form Designer generated code ///
