Use the C # Pie Chart and bar chart for data statistics.

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.