Use the GDI function to construct a graphical report

I. Introduction: In the recent period, data needs to be statistically analyzed in the form of reports and graphs due to work needs. As there are no relevant development components at hand, therefore, we use the GDI function to draw the underlying graph, and use the data statistics and combination of the middle layer to embed the surface into the HTML file, forming a complete set of applications for generating pie charts, bar charts, and line charts, now we will provide the design ideas and some source code for mutual communication.
Ii. design ideas:
User request-data collection-logical organization-call custom underlying functions-call. net GDI graphic function -- generate a JPG file -- return the HTML file pointing to the JPG image --
Ii. Some code:

1. Customize underlying graphic functions

/// <Summary>
/// Summary of JpgProxy.
/// </Summary>
Public class JpgProxy
{
# Region pie chart
/// <Summary>
/// Create a pie chart
/// </Summary>
/// <Param name = "height"> canvas height </param>
/// <Param name = "width"> canvas width </param>
/// <Param name = "title"> graphic title </param>
/// <Param name = "partName"> name of the graphic component element </param>
/// <Param name = "partPoint"> element coordinate of the image </param>
/// <Param name = "partCount"> total number of graphic component elements </param>
/// <Param name = "partColor"> Graphic Element color </param>
/// <Param name = "imgName"> name of the output Graphic File </param>
/// <Param name = "unit"> Statistical unit </param>
/// <Param name = "bgColor"> background color </param>
/// <Param name = "strErr"> function call return information </param>
/// <Param name = "debug"> function call test </param>
/// <Returns> whether the function call is successful </returns>
Public static bool DrawPie (int height, int width, string title, string [] partName, float [,] partPoint, int [] partCount, Color [] partColor, string imgName, string unit, Color bgColor, out string strErr, bool debug)
{
# Region separation Parameters
// Parameter detection
If (partPoint. GetLength (0 )! = PartColor. Length)
{
StrErr = "coordinate parameters and color parameters are asymmetrical, and function calls are denied ";
Return false;
}
Else if (partPoint. GetLength (0 )! = 2)
{
StrErr = "the definition of the array of coordinate parameters is inconsistent with the conventions. function call is denied ";
}
Else if (partPoint. GetLength (0 )! = PartName. Length)
{
StrErr = "the coordinate parameter and composition name parameter are asymmetrical and the function call is denied ";
Return false;
}
String outPutName = imgName. split ('\') [imgName. split ('\\'). length-1]. split ('. ') [0]. toString ();
String outPutParth = "";
For (int I = 0; I {
OutPutParth = outPutParth imgName. Split ('\') [I]. ToString ()"\\";
}
# Endregion
# Region basic graphics
// Function call
Bitmap bmp = new Bitmap (width, height );
Graphics g = Graphics. FromImage (bmp );
Pen pen = new Pen (Color. Black );

Rectangle outline = new Rectangle (0, 0, height-5, width-5 );
G. SmoothingMode = SmoothingMode. AntiAlias;
G. Clear (bgColor );
G. DrawEllipse (pen, outline );
// Output graphic Area
For (int I = 0; I <partName. Length; I)
{
G. FillPie (new SolidBrush (partColor [I]), outline, partPoint [I, 0], partPoint [I, 1]);
}
// Output to image
Bmp. Save (imgName, ImageFormat. Jpeg );
# Endregion
# Region graphic title
If (debug)
{
Bmp = new Bitmap (200, 30 );
G = Graphics. FromImage (bmp );
G. Clear (bgColor );
G. DrawString (title, new Font ("Arail", 14, FontStyle. Regular), SystemBrushes. WindowText, new PointF (0, 0 ));
Bmp. Save (outPutParth outPutName "_" "Title" ". jpg", ImageFormat. Jpeg );
}
# Endregion
# Region description
// Output color box
For (int I = 0; I <partName. Length; I)
{
Bmp = new Bitmap (15, 15 );
G = Graphics. FromImage (bmp );
Pen = new Pen (Color. Black );
G. Clear (bgColor );
Outline = new Rectangle (0, 0, 10, 10 );
G. DrawRectangle (pen, outline );
G. FillRectangle (new SolidBrush (partColor [I]), 0, 0, 10, 10 );
Bmp. Save (outPutParth outPutName "_" "DesColor" "_" I. ToString () ". jpg", ImageFormat. Jpeg );
}
# Endregion
# Region description
If (debug)
{
For (int I = 0; I <partName. Length; I)
{
Bmp = new Bitmap (120, 15 );
G = Graphics. FromImage (bmp );
G. Clear (bgColor );
G. drawString (partName [I]. toString () ":" Convert. toString (partCount [I]) "" unit, new Font ("Arail", 9, FontStyle. regular), SystemBrushes. windowText, new PointF (0, 0 ));
Bmp. Save (outPutParth outPutName "_" "DesText" "_" I. ToString () ". jpg", ImageFormat. Jpeg );
}
}
# Endregion
# Region release resources
G. Dispose ();
Bmp. Dispose ();
StrErr = imgName "drawn successfully ";
Return true;
# Endregion
}
# Endregion

2. Intermediate logical organization functions

# Region build a pie chart
/// <Summary>
/// Construct a pie chart
/// </Summary>
/// <Param name = "pie"> graphic parameters </param>
/// <Param name = "JpgName"> graphic name </param>
/// <Returns> target file address </returns>
Private static string CreatePie (JPGPie pie, string JpgName)
{

// Calculate the sum
Int Count = 0;
For (int I = 0; I <pie. ElementValue. Length; I)
{
Count = Count pie. ElementValue [I];
}
String strContent = "";
If (Count! = 0)
{

# Region organization graphics Parameters
// Element coordinates of the graphic components
Float [,] partPoint = new float [pie. ElementCount, 2];
For (int I = 0; I <partPoint. GetLength (0); I)
{
For (int j = 0; j <partPoint. GetLength (1); j)
{
If (I = 0 & j = 0) // The first side of the first slice
{
PartPoint [I, j] = 0.0F;
}
Else if (j = 0) // The first edge of the middle slice
{
PartPoint [I, j] = partPoint [I-1, 0] partPoint [I-1,1];
}
Else if (j = 1 & I = partPoint. GetLength (0)-1) // The last fan type
{
PartPoint [I, j] = Convert. ToSingle (pie. ElementValue [I] * 360/Count 2 );
}
Else if (j = 1) // The second edge of the middle slice
{
PartPoint [I, j] = Convert. ToSingle (pie. ElementValue [I] * 360/Count );
}
}
}
# Endregion
String strErr = "";
String strImgName = JPGReportManage. JpgPath ("Pie \" JpgName ". jpg ");
# Region calls graphical Functions
JpgProxy. drawPie (pie. bgHeight, pie. bgWidth, pie. bgTitle, pie. elementName, partPoint, pie. elementValue, pie. elementColor, strImgName, pie. unit, pie. bgColor, out strErr, false );
# Endregion
# Region organizes HTML code
# Region format Control
// Length of the converted value
Int vir_max_lenth = 0;
// Actual value Length
Int val_max_lenth = 0;
// Maximum element subscript
Int flag = 0;
# Region find the largest element subscript
Int k = 0;
Int max_Value = pie. ElementValue [0];
For (int I = 0; I <pie. ElementValue. Length; I)
{
If (k <pie. ElementValue. Length-1)
{
K = I 1;
}
Else
{
Break;
}
If (max_Value <pie. ElementValue [k])
{
Max_Value = pie. ElementValue [k];
Flag = k;
}
}
# Endregion
// Length Standard
Vir_max_lenth = Convert. ToString (pie. ElementValue [flag] * 100/Count). Length;
Val_max_lenth = pie. ElementValue [flag]. ToString (). Length;
# Endregion
String strDynamic = "";
For (int I = 0; I <pie. ElementCount; I)
{
StrDynamic = strDynamic
"<Tr>"
"<Td>"
"<Img src = '../jpg/pie/" JpgName "_ DesColor _" I. ToString () ". jpg'>"
"</Td>"
"<Td>"
"<Font size = 2>"
Pie. elementName [I]. toString () ":" Convert. toString (pie. elementValue [I] * 100/Count) JPGReportManage. HTMLSpaceGenerator (vir_max_lenth-Convert. toString (pie. elementValue [I] * 100/Count ). length) pie. unit "[" pie. elementValue [I]. toString () JPGReportManage. HTMLSpaceGenerator (val_max_lenth-pie. elementValue [I]. toString (). length) "]"
"</Font>"
"</Td>"
"</Tr> ";
}
StrContent = "<HTML> <Head> </Head> <Body>"
"<Table align = 'center' width = '20180101' height = '20180101'>"
"<Tr>"
"<Td>"
"<Table align = 'center'>"
"<Tr>"
"<Td>"
"<Img src = '../jpg/pie/" JpgName ". jpg'>"
"<Td>"
"<Td>"
"<Table align = 'center'>"
StrDynamic
"</Table>"
"<Td>"
"</Tr>"
"</Table>"
"</Td>"
"<Tr>"
"</Table>"
"</Body> </HTML> ";
# Endregion
}
Else
{
# Region organizes HTML code
StrContent = "<HTML> <Head> </Head> <Body>"
"<Table align = 'center' width = '20180101' height = '20180101'>"
"<Tr>"
"<Td>"
"<Table align = 'center'>"
"<Tr>"
"<Td>"
"No data can be displayed"
"</Td>"
"</Tr>"
"</Table>"
"</Td>"
"<Tr>"
"</Table>"
"</Body> </HTML> ";
# Endregion
}
# Region generate HTML files
JPGReportManage. CreateHtmFile (JPGReportManage. HtmlPath (JpgName ". htm"), strContent );
# Endregion
Return "../Html/" JpgName ". htm ";
}
# Endregion

3. Specific Application calls

# Region district case handling count year-on-year column chart
/// <Summary>
/// Year-on-year comparison of the number of parcels handled by each region
/// </Summary>
/// <Param name = "param"> </param>
/// <Returns> </returns>
Private static string Create_Cit_Case_Amount_Pos_Column (PosContrastParam param)
{
# Region logic processing
# Region parameter Processing
LiLongDataReport. JPGColumn column = new JPGColumn ();
// Image color
Column. BgColor = System. Drawing. Color. White;
// Image Height
Column. BgHeight = 860;
// Image title
Column. BgTitle = "";
// Image Width
Column. BgWidth = 860;
// Columnar color
System. Drawing. Color [] color = {System. Drawing. Color. Blue };
Column. ElementColor = color;
// Total number of Columns
Column. ElementCount = 1;
// Column description
String [] name = new string [PosNameDataBag. NameList. Length];
For (int I = 0; I <name. Length; I)
{
Name [I] = PosNameDataBag. NameList [I]. Substring (0, 2 );
}
Column. ElementName = name;
// Statistical unit
Column. XUnit = "zone ";
// Statistical unit
Column. YUnit = "parts ";
// Column height
Int [] position = new int [PosNameDataBag. NameList. Length];
String Begin = "";
String End = "";
For (int I = 0; I <param. StartDate. Split ('-'). Length; I)
{
Begin = Begin param. StartDate. Split ('-') [I];
}
For (int I = 0; I <param. EndDate. Split ('-'). Length; I)
{
End = End param. EndDate. Split ('-') [I];
}
# Endregion
# Region submit Query
String strErr = "";
String Result = "";
String strSql = "";
For (int I = 0; I <position. Length; I)
{
XMLProxy. setNodeValue (System. web. httpContext. current. server. mapPath (".. ")" \ "" state. xml "," comprehensive query "," processing "PosNameDataBag. nameList [I] "area data task count [" PosNameDataBag. nameList. length. toString () "] processed [" I. toString () "] not processed [" Convert. toString (PosNameDataBag. nameList. length-I) "]");
StrSql = "SELECT count (*) as col from case handling table where Cast (acceptance date as datetime)> = '" Begin "' and Cast (acceptance date as datetime) <= '"End "'";
DataBaseProxy. ExceuteSql (ConfigManage. ConnectionStringProxy (PosNameDataBag. NameList [I]), strSql, out Result, out strErr );
Position [I] = int. Parse (Result );
}
# Endregion
# Binding region to parameters
Column. ElementValue = position;
# Endregion
# Endregion
# Region kernel call
String strReturn = null;
StrReturn = JPGReportManage. CreateColumn (column, "Cit_Case_Amount_Pos_Column ");
# Endregion
Return strReturn;
}
# Endregion

4. Call functions on the Surface Layer

# Region
/// <Summary>
/// Construct a area-level statistical chart
/// </Summary>
/// <Param name = "jpgType"> image type </param>
/// <Param name = "param"> statistical parameters </param>
/// <Returns> target file address </returns>
Public static string BuildPosAmountJPG (EJpgReportType jpgType, PosAmountParam param)
{
String strReturn = null;
Switch (jpgType)
{

Case EJpgReportType. Pos_Case_Amount_Type_Pie:
{
StrReturn = JPGReportManage. Create_Pos_Case_Amount_Type_Pie (param );
Break;
}
Case EJpgReportType. Pos_Case_Amount_Year_Curve:
{
StrReturn = JPGReportManage. Create_Pos_Case_Amount_Year_Curve (param );
Break;
}
Default:
{
StrReturn = "";
Break;
}
}
Return strReturn;
}
# Endregion

5. List related parameters

/// <Summary>
/// Graphical Report Type
/// </Summary>
Public enum EJpgReportType
{
/// <Summary>
/// Area chart showing the trend of the annual number of parcels
/// </Summary>
Pos_Case_Amount_Year_Curve = 0,
/// <Summary>
/// Pie chart showing the proportion of each type in the number of district-level items
/// </Summary>
Pos_Case_Amount_Type_Pie = 1,
/// <Summary>
/// Year-on-year comparison of the number of parcels handled by each region
/// </Summary>
Cit_Case_Amount_Pos_Column = 2,
/// <Summary>
/// Pie chart showing the number of pieces handled by each region
/// </Summary>
Cit_Case_Amount_Pos_Pie = 3,
/// <Summary>
/// Municipal annual component quantity trend line chart
/// </Summary>
Cit_Case_Amount_Year_Curve = 4,
/// <Summary>
/// Pie chart showing the proportion of each case type in each district
/// </Summary>
Cit_Case_Type_Pie = 5,
/// <Summary>
/// Line chart of the annual number of pieces handled by the Bureau
/// </Summary>
Adm_Case_Amount_Year_Curve = 6,
/// <Summary>
/// The year-on-year comparison of the number of pieces handled by the Bureau
/// </Summary>
Adm_Case_Amount_Adm_Column = 7,
/// <Summary>
/// The year-on-year comparison of the number of documents handled by each bureau
/// </Summary>
Adm_Case_Amount_Sub_Column = 8,
/// <Summary>
/// Pie chart of annual parcel handling efficiency evaluation and analysis at the district level
/// </Summary>
Pos_Case_End_Efficiency_Year_Pie = 9
}

# Region pie chart data structure
/// <Summary>
/// Data structure of the pie chart
/// </Summary>
Public class JPGPie
{
// Number of pie-like elements
Private int elementCount;
// Name of the pie-like component
Private string [] elementName;
// Pie-like element color
Private Color [] elementColor;
// The size of the pie-like elements
Private int [] elementValue;
// Pie chart background color
Private Color bgColor;
// Pie chart height
Private int bgHeight;
// Pie chart width
Private int bgWidth;
// Pie chart title
Private string bgTitle;
// Pie chart statistical unit
Private string unit;
/// <Summary>
/// Pie chart statistical unit
/// </Summary>
Public string Unit
{
Get
{
Return unit;
}
Set
{
Unit = value;
}
}
/// <Summary>
/// Number of pie-like elements
/// </Summary>
Public int ElementCount
{
Get
{
Return elementCount;
}
Set
{
ElementCount = value;
}
}

/// <Summary>
/// Name of the pie-like component
/// </Summary>
Public string [] ElementName
{
Get
{
Return elementName;
}
Set
{
ElementName = value;
}
}
/// <Summary>
/// Pie-like element color
/// </Summary>
Public Color [] ElementColor
{
Get
{
Return elementColor;
}
Set
{
ElementColor = value;
}
}
/// <Summary>
/// The size of the pie-like elements
/// </Summary>
Public int [] ElementValue
{
Get
{
Return elementValue;
}
Set
{
ElementValue = value;
}
}
/// <Summary>
/// Pie chart background color
/// </Summary>
Public Color BgColor
{
Set
{
BgColor = value;
}
Get
{
Return bgColor;
}
}
/// <Summary>
/// Pie chart height
/// </Summary>
Public int BgHeight
{
Get
{
Return bgHeight;
}
Set
{
BgHeight = value;
}
}

/// <Summary>
/// Pie chart width
/// </Summary>
Public int BgWidth
{
Get
{
Return bgWidth;
}
Set
{
BgWidth = value;
}
}
/// <Summary>
/// Pie chart title
/// </Summary>
Public string BgTitle
{
Get
{
Return bgTitle;
}
Set
{
BgTitle = value;
}
}
}
# Endregion

6. Display Results