It is easy to implement ASP. net mvc. Microsoft released a powerful ASP. NET chart control, supports a variety of chart Options settings-including columns, points, Bubbles, pie charts, ring charts, pyramid, funnel, box charts, area, range, AJAX interaction, and more. The Microsoft chart control sample project contains more than 200 Chart samples on the ASP. NET page. In this article, I will show you how to use chart controls in ASP. NET MVC.
My example project is in ASP. net mvc 2. Here I will introduce a very simple project that shows a comparison of the results of a class. Two fields-ID (this is the only student) and GPA (average score)-represent the results of a specific student. The results of various charts are displayed, and the students' results are compared. I want to focus on how to easily display different results of the same data. In this project, you can add, edit, and delete student scores and dynamically display changes.
To run this project, you must install the following Microsoft chart control components for Microsoft Net Framework 3.5.
Code, you will need to reference the System. Web. UI. DataVisualization assembly.
Once you do this, it is quite a lot of simple charts added to the view page.
Copy to ClipboardReference: [www.bkjia.com] "alt =" "/>
Directly paste the code
First define a controller and provide the following implementation methods:
Copy to ClipboardReference: [www.bkjia.com] # region Chart Component
Public FileResult CreateChart (SeriesChartType chartType)
{
IList <ResultModel> cmdles = _ resultService. GetResults ();
Chart chart = new Chart ();
Charts. Width = 700;
Chart. Height = 300;
Chart. BackColor = Color. FromArgb (211,223,240 );
Chart. BorderlineDashStyle = ChartDashStyle. Solid;
Chart. BackSecondaryColor = Color. White;
Chart. BackGradientStyle = GradientStyle. TopBottom;
Chart. BorderlineWidth = 1;
Chart. Palette = ChartColorPalette. BrightPastel;
Chart. BorderlineColor = Color. FromArgb (26, 59,105 );
Chart. RenderType = RenderType. BinaryStreaming;
Chart. BorderSkin. SkinStyle = BorderSkinStyle. Emboss;
Chart. AntiAliasing = AntiAliasingStyles. All;
Chart. TextAntiAliasingQuality = TextAntiAliasingQuality. Normal;
Chart. Titles. Add (CreateTitle ());
Chart. Legends. Add (CreateLegend ());
Chart. Series. Add (CreateSeries (Les, chartType ));
Chart. ChartAreas. Add (CreateChartArea ());
MemoryStream MS = new MemoryStream ();
Chart. SaveImage (MS );
Return File (ms. GetBuffer (), @ "image/png ");
}
[NonAction]
Public Title CreateTitle ()
{
Title title Title = new Title ();
Title. Text = "Result Chart ";
Title. ShadowColor = Color. FromArgb (32, 0, 0, 0 );
Title. Font = new Font ("Trebuchet MS", 14F, FontStyle. Bold );
Title. ShadowOffset = 3;
Title. ForeColor = Color. FromArgb (26, 59,105 );
Return title;
}
[NonAction]
Public Legend CreateLegend ()
{
Legend legend = new Legend ();
Legend. Name = "Result Chart ";
Legend. Docking = Docking. Bottom;
Legend. Alignment = StringAlignment. Center;
Legend. BackColor = Color. Transparent;
Legend. Font = new Font (new FontFamily ("Trebuchet MS"), 9 );
Legend. LegendStyle = LegendStyle. Row;
Return legend;
}
[NonAction]
Public Series CreateSeries (IList <ResultModel> results, SeriesChartType chartType)
{
Series seriesDetail = new Series ();
SeriesDetail. Name = "Result Chart ";
SeriesDetail. IsValueShownAsLabel = false;
SeriesDetail. Color = Color. FromArgb (198, 99, 99 );
SeriesDetail. ChartType = chartType;
SeriesDetail. BorderWidth = 2;
SeriesDetail ["DrawingStyle"] = "Cylinder ";
SeriesDetail ["PieDrawingStyle"] = "SoftEdge ";
DataPoint point;
Foreach (ResultModel result in results)
{
Point = new DataPoint ();
Point. AxisLabel = result. ID;
Point. YValues = new double [] {double. Parse (result. GPA )};
SeriesDetail. Points. Add (point );
}
SeriesDetail. ChartArea = "Result Chart ";
Return seriesDetail;
}
[NonAction]
Public ChartArea CreateChartArea ()
{
ChartArea chartArea = new ChartArea ();
ChartArea. Name = "Result Chart ";
ChartArea. BackColor = Color. Transparent;
ChartArea. AxisX. IsLabelAutoFit = false;
ChartArea. AxisY. IsLabelAutoFit = false;
ChartArea. AxisX. LabelStyle. Font = new Font ("Verdana, Arial, Helvetica, sans-serif", 8F, FontStyle. Regular );
ChartArea. AxisY. LabelStyle. Font = new Font ("Verdana, Arial, Helvetica, sans-serif", 8F, FontStyle. Regular );
ChartArea. AxisY. LineColor = Color. FromArgb (64, 64, 64, 64 );
ChartArea. AxisX. LineColor = Color. FromArgb (64, 64, 64, 64 );
ChartArea. AxisY. MajorGrid. LineColor = Color. FromArgb (64, 64, 64, 64 );
ChartArea. AxisX. MajorGrid. LineColor = Color. FromArgb (64, 64, 64, 64 );
ChartArea. AxisX. Interval = 1;
Return chartArea;
}
# Endregion
Various attributes of the chart class, including width, height, border color, background color, skin, and color palette. Finally, the image format is displayed on the page.
The project described here is a demo of the chart control of ASP. net mvc, which is displayed as follows:
