Distortion in ASP.NET to create a histogram and pie chart

xiaoxiao2021-03-06 39

In application development, we often encounter a statistical chart of data from data source dynamically retrieving. Before Microsoft .NET Framework appears, the method we take is mainly writing components to complete this task. This feature can now be easily implemented using the rich GDI classes and objects provided by Microsoft .NET Framework. In this article, let's take a look at how to dynamically create common column graphs and pie charts in ASP.NET. There are many of the data sources, and in this article, we will perform examples in an array, but the method of this example is easy to convert into a database type data source. Step 1: Create a new ASP.NET project. Open Microsoft Visual Studio .NET, click on "File" - "New" - "Project", open the "New Project" dialog box, "Project Types" In the "Visual Basic Project", select "ASP.NET Application" in "Templates", enter: http:// localhost / askCHARTS, click "OK (OK) "button, Microsoft Visual Studio .NET will automatically create a web project called AspCharts in the wwwroot directory. Step 2: Write code for the default start page (AspxChart.aspx). We want to display dynamically created graphics in this page, open the "html" view of the AspxChart.aspx tab, insert the following code:

ASP.NET dynamism creation graphic example Three steps: Add a web form page called Chart.aspx. Open the Solution Explorer, click Right click on "ASPCHARTS project", select "Add (add) - Add New Item", pop-up "Add New Item (Add New Item "Dialog, select" Web Form "in the" Template "on the right, enter" chart.aspx "in the name under the bottom, click the" Open ". Step 4: Add code to the "Chart.aspx" web form page.

Click Right-click on the "Chart.aspx" form, select "View code", add the following two lines in the first line of the code: Imports System.drawingImports System.drawing.ImagingPublic Class Chart inherits System.Web.ui .Page # Region "Web Form Designer Generated Code" 'This call is required for the web form designer. Private Sub InitializeComponent () End Sub Private Sub Page_Init (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: This method is called the Web Form Designer Required 'Don't modify it using the code editor. InitializationComponent () end sub # end region 'creates page event private sub page_load (Byval e as system.eventargs) Handles mybase.load' declares integer variable I, DIM I as integer 'Create a bit Figure object, used to place the column chart, we can think of it as a canvas. 'Here, the height is 400 and 200, of course, you can also transfer them as parameters as needed. DIM OBJBITMAP AS New Bitmap (400, 200) 'Declarations a graphic object, drawing on the bitmap created above. DIM ObjGraphics AS Graphics' Creates a new graphics object Objgraphics from the specified Objbitmap object. Objgraphics = graphics.FromImage (objbitmap) 'Clears the entire drawing surface and fill it with a specified white as a background color. Objgraphics.clear (color.White) 'Creates a data source, here we use arrays as a cylindrical diagram and pie chart for data sources for convenience. DIM Arrvalues (5) AS Integer Arrvalues (0) = 100 Arrvalues (1) = 135 Arrvalues (2) = 115 Arrvalues (3) = 125 Arrvalues (4) = 75 Arrvalues (5) = 120 'Defines an array object, used Describe the legend.

DIM Arrvaluenames (5) AS String Arrvaluenames (0) = "Jan" Arrvalueenames (1) = "February" Arrvaluenames (2) = "March" Arrvaluenames (3) = "April" ArrValuenames (4) = "five Month "Arrvaluenames (5) =" June "'The coordinates 5, 5 of the canvas (Objbitmap object), plotting the statistics graphic with the specified Brush object and Font (font) object. Objgraphics.drawstring ("X company sales in the first half of the year", _ New Font ("Song", 16), brushes.black, new pointf (5)) 'Create a legend text. DIM SYMBOLLEG AS POINTF = New Pointf (335, 20) DIM Descleg as pointf = New PointF (360, 16) 'draws the legend. Draw a legend using three methods of Objgraphics graphic object: The 'FillRectangle () method draws a fill rectangle, and the DrawRectangle () method draws a rectangular border, and the' DrawString () method draws the text. The method of these three graphics objects is overloaded in the .NET framework class library, 'can be easily drawn according to different parameters. For i = 0 to arrvaluenames.length - 1 'draws a fill rectangle. Objgraphics.FillRectangle (New Solidbrush (GetColor (i)), Symbolleg.x, Symbolleg.y, 20, 10) 'draws a rectangular border. Objgraphics.drawRectangle (Pens.Black, Symbolleg.x, Symbolleg.y, 20, 10) 'draws the legendary text. Objgraphics.drawstring (Arrvaluenames (i) .tostring, New Font ("Song", 10), brushes.black, descleg) Mobile coordinate position, only the value of the Y direction can be moved. Symbolleg.y = 15 descleg.y = 15 next I 'Traces each of the data sources, and draws a rectangle diagram (i.e., column chart) according to the size of the data. For i = 0 to arrvalues.length - 1 'draws a fill rectangle. Objgraphics.FillRectangle (New Solidbrush (GetColor (i)), _ (i * 35) 15, 200 - Arrvalues (i), 20, Arrvalues (i) 5) 'Draw a rectangular edge line. Objgraphics.drawRectangle (Pens.Black, (i * 35) 15, 200 - Arrvalues (i), 20, Arrvalues (i) 5) Next 'The following paintings.

First define two variables, represent the current angle and the total angle, in order to discharmatically convert the angle while drawing. DIM SGLCURRENTANGLE AS SINGLE = 0 DIM SGLTOLANGLE AS SINGLE = 0 'Defines a variable that represents the total sales. DIM SGLTOTALUES AS SINGLE = 0 'calculates the total sales. For i = 0 TO Arrvalues.Length - 1 SGLTOTALUES = Arrvalues (i) Next I = 0 'Traversing each of the data sources, and draws the pie chart according to the size of the data. The Fillpie () method of the 'graphic object is overloaded in the .NET Framework class library. For i = 0 to arrivalues.length - 1 'Calculate the current angle value: The monthly sales / total sales * 360, get the angle size occupied by the pie chart. SGLCurrentangle = Arrvalues (i) / sgltotalvalues * 360 'draws a populated arc. Objgraphics.Fillpie (New Solidbrush (getColor (i)), _ 220, 95, 100, 100, sgltotalangle, sglcurrentangle) 'draws an arc line. Objgraphics.drawpie (Pens.black, 220, 95, 100, 100, sgltotalangle, sglcurrentangle) 'adds the current arc angle to the total angle. SGLTOLANGLE = SGLCURRENTANGLE NEXT I 'Save the ObjGraphics object in the specified graphics format (here GIF) to the specified Stream object, and output to the client. Objbitmap.save (response.outputstream, imageformat.gif) End sub 'below this function is used to return different color values according to different months.

Private Function GetColor (ByVal itemIndex As Integer) As Color Dim objColor As Color Select Case itemIndex Case 0 objColor = Color.Blue Case 1 objColor = Color.Red Case 2 objColor = Color.Yellow Case 3 objColor = Color.Purple Case 4 objColor = Color.Orange Case 5 objColor = Color.Brown Case 6 objColor = Color.Gray Case 7 objColor = Color.Maroon Case 8 objColor = Color.Maroon Case Else objColor = Color.Blue End Select Return objColor End FunctionEnd Class well, our The code has been written, click "All Save" buttons, then press "F5" to see the best results. If there is no error, you will see the following results: It is worth noting that the above simply exemplifies how to create a simple graphic in the .NET Framework class library, but the .NET Framework class library is also available. More advanced two-dimensional and vector graphics features, use these advanced features, we can create two dimensions or vector graphics, then our graphic looks more image. All of this article is pronounced in Simplified Chinese Windows 2000 .NET Framework 1.0 (English official version) .NET Framework SP1 and Windows XP .NET Framework 1.0 (Chinese Version).

C # code using System.Drawing; using System.Drawing.Imaging; public class Chart: System.Web.UI.Page {[System.Diagnostics.DebuggerStepThrough ()] private void InitializeComponent () {} private void Page_Init (object sender, System .EventArgs e) {InitializeComponent ();} private void Page_Load (object sender, System.EventArgs e) {int i; Bitmap objBitMap = new Bitmap (400, 200); Graphics objGraphics; objGraphics = Graphics.FromImage (objBitMap); objGraphics .Clear (color.white); Int [5] arrvalues; arrvalues (0) = 100; Arrvalues (1) = 135; Arrvalues (2) = 115; Arrvalues (3) = 125; Arrvalues (4) = 75; Arrvalues (5) = 120; string [5] arrvaluenames; arrvaluenames (0) = "Jan"; Arrvaluenames (1) = "February"; ArrValuenames (2) = "March"; Arrvaluenames (3) = "April "; Arrvaluenames (4) =" May "; Arrvaluenames (5) =" June "; ObjGraphics.drawstring (" Sale of X Company ", New Font (" Song, 16), Brushes.black, New Pointf (5, 5)); Pointf Symbolleg = New Pointf (335, 20); Point F descleg = new pointf (360, 16); for (int i = 0; i <= arrvaluenames.length - 1; i ) {ObjGraphics.FillRectangle (New Solidbrush (getColor (i)), Symbolleg.x, Symbolleg.y , 20, 10); Objgraphics.drawRectangle (Pens.Black, Symbolleg.x, Symbolleg.y, 20, 10); ObjGraphics.drawstring (Arrvalueenames (i) .tostring, New Font ("Song", 10), Brushes. Black, descleg); symbolleg.y = 15; descleg.y = 15;} for (int i = 0; i <= arrvalues.length - 1; i ) {ObjGraphics.FillRectangle (New Solidbrush (GetColor (i) ), (I * 35)

转载请注明原文地址:https://www.9cbs.com/read-53892.html

9cbs

New Post(0)