First:
Pie chart:
Bar chart:
Find information on the Internet, sort it out, and comment out the configurationCodeAs follows:
1. All the code for creating a pie chart
/// <Summary>
/// Obtain the slice chart based on the four-Rate
/// </Summary>
/// <Param name = "width"> </param>
/// <Param name = "Heigh"> </param>
/// <Param name = "R"> pie chart radius </param>
/// <Param name = "familyname"> </param>
/// <Param name = "data"> </param>
/// <Returns> </returns>
Public bitmap getbitmap (INT width, int Heigh, int R, string familyname, Dictionary <string, double> data)
{
Bitmap bitmap = new Bitmap (width, heigh );
Graphics graphics = graphics. fromimage (Bitmap );
// Fill the entire image with white, because the default value is black.
Graphics. Clear (color. White );
// Anti-aliasing
Graphics. smoothingmode = smoothingmode. highquality;
// High-quality text
Graphics. textrenderinghint = textrenderinghint. cleartypegridfit;
// The pixels are all offset by 0.5 units to eliminate the Sawtooth
Graphics. pixeloffsetmode = pixeloffsetmode. Half;
// The origin position of the first Color Block
Pointf basepoint = new pointf (10, 20 );
// Color Block Size
Sizef thesize = new sizef (45, 16 );
// Specifies the position of the text in the first color block.
Pointf textpoint = new pointf (basepoint. x + 50, basepoint. y );
Foreach (VAR item in data)
{
Rectanglef baserectangle = new rectanglef (basepoint, thesize );
// Draw a Color Block
Graphics. fillrectangle (New solidbrush (getcolor (item. Key. tostring (), baserectangle );
Graphics. drawstring (item. Key. tostring (), new font (familyname, 11), brushes. Black, textpoint );
Basepoint. Y + = 30;
Textpoint. Y + = 30;
}
// The origin position of the border of the slice Area
Point circlepoint = new point (convert. toint32 (textpoint. x + 90), 35 );
// Total ratio Initial Value
Float totalrate = 0;
// Start point: week Y
Float startangle = 30;
// Initial current ratio
Float currentrate = 0;
// The border size of the circle
Size ciclesize = new size (R * 2, R * 2 );
// The Position of the circle's border
Rectangle circlerectangle = new rectangle (circlepoint, ciclesize );
Foreach (VAR item in data) totalrate + = float. parse (item. value. tostring ());
Foreach (VAR item in data)
{
Currentrate = float. parse (item. value. tostring ()/totalrate * 360;
Graphics. drawpie (pens. White, circlerectangle, startangle, currentrate );
Graphics. fillpie (New solidbrush (getcolor (item. Key. tostring (), circlerectangle, startangle, currentrate );
// At this point, the slice chart has been drawn, and the following is the description text on the slice chart
// Coordinates of the origin of the image border relative to the center of the current circle
Pointf cpoint = new pointf (circlepoint. x + R, circlepoint. Y + r );
// Point on the Current Arc
// Cos (radians) = x axis coordinate/R
// Radians = angle * π/180
Double relativecurrentx = r * Math. Cos (360-startangle-currentrate/2) * Math. PI/180 );
Double relativecurrenty = r * Math. Sin (360-startangle-currentrate/2) * Math. PI/180 );
Double currentx = relativecurrentx + cpoint. X;
Double currenty = cpoint. Y-relativecurrenty;
// Floating point coordinate on the arc of inner circle
Pointf currentpoint = new pointf (float. parse (currentx. tostring (), float. parse (currenty. tostring ()));
// Point on the external arc
Double largerr = R + 25;
Double relativelargerx = largerr * Math. Cos (360-startangle-currentrate/2) * Math. PI/180 );
Double relativelargery = largerr * Math. Sin (360-startangle-currentrate/2) * Math. PI/180 );
Double largerx = relativelargerx + cpoint. X;
Double largery = cpoint. Y-relativelargery;
// Floating point coordinate on the arc in the outer circle
Pointf largerpoint = new pointf (float. parse (largerx. tostring (), float. parse (largery. tostring ()));
// Connect two points
// Graphics. drawline (pens. Black, currentpoint, largerpoint );
// Specifies the position of the text on the outer circle
Pointf circletextpoint = new pointf (float. parse (largerx. tostring (), float. parse (largery. tostring ()));
// Specify a proper position near the point in the outer circle
If (largerx> = 0 & largery> = 0) // the second quadrant of the 1st quadrant
{
// Circletextpoint. Y-= 15;
Circletextpoint. X-= 35;
}
If (largerx <= 0 & largery> = 0) // The third quadrant of the 2nd quadrant
{
// Circletextpoint. Y-= 15;
// Circletextpoint. X-= 65;
}
If (largerx <= 0 & largery <= 0) // The Fourth quadrant in the 3rd quadrant
{
// Circletextpoint. X-= 45;
Circletextpoint. Y + = 30;
}
If (largerx> = 0 & largery <= 0) // The First quadrant of the 4th quadrant
{
Circletextpoint. X-= 15;
// Circletextpoint. Y + = 5;
}
// Quadrant difference explanation: in mathematics, the top right of the Two-dimensional coordinate axis is positive, and the bottom right is positive when the computer processes the image. Shifts a quadrant number clockwise.
Graphics. drawstring (item. key. tostring () + "" + (currentrate/360 ). tostring ("p2"), new font (familyname, 11), brushes. black, circletextpoint );
Startangle + = currentrate;
}
Return bitmap;
}
2. Obtain the color code:
Color getcolor (string scorelevel ){
Color c = color. White;
If (scorelevel. Contains ("excellent "))
C = color. fromargb (57,134,155 );
If (scorelevel. Contains ("good "))
C = color. fromargb (70,161,185 );
If (scorelevel. Contains ("general "))
C = color. fromargb (124,187,207 );
If (scorelevel. Contains ("fail "))
C = color. fromargb (181,212,224 );
Return C;
}
3. Code for drawing a bar chart
/// <Summary>
/// Obtain the column chart
/// </Summary>
/// <Param name = "width"> </param>
/// <Param name = "Heigh"> </param>
/// <Param name = "familyname"> </param>
/// <Param name = "data"> </param>
/// <Param name = "paperscore"> </param>
/// <Returns> </returns>
Public bitmap getbargraph (INT width, int Heigh, string familyname, Dictionary <string, double> data, int paperscore)
{If (Data! = NULL)
{
Bitmap bitmap = new Bitmap (width, heigh );
Graphics graphics = graphics. fromimage (Bitmap );
// Fill the entire image with white, because the default value is black.
Graphics. Clear (color. White );
// Anti-aliasing
Graphics. smoothingmode = smoothingmode. highquality;
// High-quality text
Graphics. textrenderinghint = textrenderinghint. cleartypegridfit;
// The pixels are all offset by 0.5 units to eliminate the Sawtooth
Graphics. pixeloffsetmode = pixeloffsetmode. Half;
Double maxcount = 0;
// Based on the maximum number of users
Foreach (VAR item in data) if (convert. todouble (item. value. tostring ()> maxcount)
Maxcount = convert. todouble (item. value. tostring ());
// Draw a score line at 25 pixels from the bottom and mark the Four scores
// The width of the score line is 85% of the image width.
// Shard line origin location
Pointf scorelinestartpoint = new pointf (width * 0.15f/2f, heigh-25f );
// Shard End Point
Pointf scorelineendpoint = new pointf (scorelinestartpoint. x + width * 0.85f, scorelinestartpoint. y );
Graphics. drawline (pens. Black, scorelinestartpoint, scorelineendpoint );
// Definition: the maximum number of users accounts for 85% of the Image Height.
// The height of each item * 85%/maxcount = the height of the item
Float currentx = width * 0.85f * (1f/9) // The starting point is 1/9 in a straight line.
+ Width * 0.15f/2 // The two sides of the image are empty at 15%, and each side is empty at half of 15%;
Float perwidth = width * 0.85f * (1f/9 );
Foreach (VAR item in data)
{
// Origin description of the current level: height-25-(number of people * 0.9/maxcount)
Float currentheight = (float) item. Value * 0.85f * heigh/(float) maxcount;
// Use light blue for all colors
Graphics. fillrectangle (New solidbrush (color. fromargb (70,161,187), currentx, heigh-25-currentheight-1, perwidth, currentheight );
// Draw the left line of the current Interval
Graphics. drawline (pens. Black, currentx, scorelinestartpoint. Y, currentx, scorelinestartpoint. Y + 3 );
// Write the number of people in the above five pixels
Graphics. drawstring (item. value. tostring () + "(person)", new font (familyname, 11), brushes. black, currentx-4, heigh-25-currentheight-1-18 );
Graphics. drawstring (item. Key. tostring (), new font (familyname, 11), brushes. Black, currentx, scorelinestartpoint. Y + 3 );
Currentx + = perwidth; // shift the width of a column to the right.
// Draw the line on the right of the current Interval
Graphics. drawline (pens. Black, currentx, scorelinestartpoint. Y, currentx, scorelinestartpoint. Y + 3 );
Currentx + = perwidth; // shift the width of a column to the right}
Graphics. drawstring ("(level)", new font (familyname, 11), brushes. Black, currentx-perwidth + 3f, scorelinestartpoint. Y + 3 );
Return bitmap;} else return NULL ;}
4. General processing of calling a bar chartProgram(Similar to a pie chart)
String datas = context. Request. querystring ["data"];
Scorestatistics S = new scorestatistics ();
Data = S. transfertoobject <dictionary <string, double> (datas );
Memorystream mem = new memorystream ();
Bitmap chart = scorestaticsbll. getbargraph (450,280, "", Data, 120 );
Chart. Save (MEm, imageformat. JPEG );
Context. response. contenttype = "image/JPEG ";
Context. response. binarywrite (MEM. toarray ());
The page code that calls an image is an image control. The SRC address is the relative website address of the above general processing program.