table of Contents:
GDI overview
Data chart drawing function
Data chart user control
to sum up
Summary:
This article is based on an overview of GDI , a simple introduction how to draw a data chart and make it a user control on this basis. Easy to use by readers and users.
GDI overview:
When it comes to GDI , we have to mention a concept GDI (Graphical Device Interface) that everyone is more familiar, GDI is like an intermediate layer equipped between the operating system and the graphics. The difference between the different graphics cards is used to block different graphics cards. With it, the user only uses the special Windows API function to perform the drawing operations you want, and the GDI at this time makes your different graphics cards to do what you have to do. Although GDI provides a fairly convenient application development interface to developers, it is still based on the old Windows API version, and is a C language style function. So it is not too convenient to use it.
The so-called GDI , it is like an intermediate layer located between GDI and your application. It provides more intuitive, inherited object models. Although GDI is like a layer of epidermics wrapped outside GDI, Microsoft claims that GDI provides new features and has some performance improvements.
Data chart drawing function:
Below I first provide a function of a simple drawing chart file:
Public void render (String Title, String Subtitle, Int Width, Int Height, Chartdata Chartdata, Graphics Tempgraphics)
{
const Int Side_length = 400;
Const Int Pie_Diameter = 200;
ChartData CD = chartdata;
FLOAT SUMDATA = 0;
For (int i = 0; i { Sumdata = float.parse (CD.DataValue [i] .tostring ()); } // Generate an Image object, and thus generate a Graphics object Bitmap BM = New Bitmap (Width, Height); Graphics g = tempgraphics; // Set the properties of the object G G.scaleTransform ((Convert. Tosingle (Width)) / Side_Length, (Convert. Tosingle (HEIGHT)) / SIDE_LENGTH); g.smoothingmode = smoothingmode.default; g.TextRenderingHint = TextRenderingHint.antialias; // Setting of canvas and side g.clear (color.white); g.drawRectangle (Pens.Black, 0, 0, Side_length-1, Side_Length-1); // Paint pie chart title G. DrawString (Title, New Font ("Tahoma", 24), Brushes.black, New Pointf (5, 5)); // Painted pie chart G. DrawString (Subtitle, New Font ("Tahoma", 14), Brushes.black, New Pointf (7, 35)); // Paint pie chart Float curangle = 0; FLOAT TOTALANGLE = 0; For (int i = 0; i { Curangle = Convert.TOSINGLE (FLOAT.PARS (CD.DataValue [i] .tostring ())) / sumdata * 360; G.Fillpie (New Solidbrush (New Solidbrush (i)), 100, 65, PIE_DIAMETER, PIE_DIAMETER, Totalangle, curangle; G. Drawpie (Pens.Black, 100, 65, PIE_DIAMETER, PIE_DIAMETER, TOTALANGLE, CURANGLE); TOTALANGLE = Curangle; } // Painting Graphical Box and Its Text g.drawRectangle (Pens.Black, 200, 300, 199, 99); G. DrawString ("Unique", New Font ("Taoma", 12, FontStyle.Bold, Brushes.black, New Pointf (200, 300)); // Painting map Pointf Boxorigin = New PointF (210, 330); Pointf textorigin = new pointf (235, 326); Float percent = 0; For (int i = 0; i { G. FillRectangle (New Solidbrush (Chartutil.getChartimemcolor (i)), Boxorigin.x, Boxorigin.y, 20, 10); g.drawRectangle (Pens.Black, Boxorigin.x, Boxorigin.y, 20, 10); Percent = convert.tosingle (float.parse (cd.datavalue [i] .tostring ())) / sumdata * 100; g.drawstring (cd.dataname [i] .tostring () "(" Percent.tostring ("0") "%)", New Font ("Tahoma", 10), Brushes.black, Textorigin; Boxorigin.y = 15; TextORIGIN.Y = 15; } } The above function is a data view plotted a simple pie type, and there is title information for the figure in the parameter table. Subtitle is the subtitle information of the figure, and two of the two are the size information of the figure Width and Height. Next, a data source CHARTDATA provided to the data view is a class that must be defined by a pen, which is specifically used to provide a data source for the data view. It will be specifically mentioned later. Finally, a Graphics object is made in a function of this graphics, and this function is not returned, but the external imported Graphics object is actually a returning value. Data Chart User Control: To facilitate future reuse, it is written into a user control, and then when you use those controls that use the development environment, you will first register this user control to the Toolbox tab of Visual Studio .NET. Then you can use it on your interface, and you can use the properties on the right side of the development environment to set your corresponding properties, such as Title, Subtitle, Datasource, etc. mentioned above. We review the data source CHARTDATA in the drawing function mentioned above; we set it to a property Datasource for the user control DataChart. Here we have to write a special class to store data. The key is that the data encountered in the design of the author is generally like ("Monday", 100). Of course, because we draw two dimensional data charts, it is clear that our useful data will be like this. This has a problem with how to provide a more beautiful data interface. Of course, you can use a DATATABLE, but this will give us a limitations of flexibility to our use, especially when you want to temporarily add or delete a data pair. At the same time, we will make the above drawing function is not intuitive. Of course, you can also use other data sources, we have used a class you designed as follows: #Region chart data source type Public Class Chartdata { #Region field and attribute Private arraylist dataname; Private ArrayList DataValue; Public ArrayList Dataname { Get {return Dataname;} Set {datavalue = value; } Public ArrayList DataValue { Get {returnidue;} Set {datavalue = value; } #ndregion #REGON disclosure constructor and method // No parameter constructor Public chartdata () { Dataname = new arraylist (); DataValue = new arraylist (); } / / Parameter is two ArrayList constructor Public Chartdata (ArrayList TempdataValue), ARRAYLIST TEMPDATAVALUE { DataName = Tempdataname; Datavalue = TempdataValue; } / / Parameter is a DataTable constructor Public ChartData (DataTable Tempdata) { DataTable DT = Tempdata; Foreach (DataRow Dr in Dt.ROWS) { THIS.DATANAME.ADD (DR [0] .tostring ()); THIS.DATAVALUE.ADD (DR [1] .tostring ()); } } Public Void Add (String Tempname, Float Tempvalue) { DataName.Add (TempName); DataValue.Add (TempValue); } //REMOVE method has a big problem, that is, it is not able to know if there is current variable in ArrayList. Leading unable to know the results // I used BinarySearch, I don't know if I can implement it. Public Bool Remove (String Tempname, Float Tempvalue) { IF (Dataname.BinarySearch (TempName)> 0 && DataValue.BinarySearch (TempValue)> 0) { DataName.Remove (TempName); DataValue.Remove (TempValue); Return True; } Else { Return False; } } #ndregion } #ndregion Two ArrayList are defined in this data class to store our useful data pairs, and provide three different constructor to provide a diverse data interface, if you just test this user control, or you are a small Application Your data is from the non-agricultural library. You can use non-parameters or provide a constructor for two ArrayList parameters so you can add your data pair through the Add method, and you can also use the Remove method to delete the data you don't need. Of course, if your data comes from a database. You can also use a constructor that provides a DataTable parameter. The next step is to provide several properties to set the corresponding parameters of the user control, such as the Title, Subtitle, DataSource, and Height, Width mentioned earlier. Let the user customize these parameters according to their needs. At the same time, we write the onPaint method to draw the area of our user controls. Protected Override Void Onpaint (Painteventargs E) { Graphics gr = E.Graphics; PieChart PC = New Piechart (); Pc.render (this.title, this.subtitle, this.chartwidth, this.chartheight, this.datasource, gr); base.onpaint (e); } to sum up: The above provides how to draw a simple data chart and write it into a user control. It also mentions how to provide a flexible data interface. Although it is relatively simple, it is still worth thinking. There is also a certain problem, such as the location information of the title, and the location and information of the legend box in the chart view, are quite dead. Still want readers to improve.
