Mvc Chart 是一个使用起来非常方便的控件，可以自定义参数，能呈现给用户很漂亮的各种统计图表;使用此图表首先要导入命名空间：System.Web.UI.DataVisualization.Charting
此dll在vs自带的里面，它的位置： C:\Program Files\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Web.DataVisualization.dll
效果图如下：
由于mvc 返回的是actionResult,而此图表chart返回的是图片，所以要封装一个ImageResult,如下：
public class ImageResult : ActionResult { public ImageResult() { } public ImageResult(Image image) { Image = image; } public ImageResult(Image image, ImageFormat format) { Image = image; ImageFormat = format; } /// <summary> /// /// </summary> public Image Image { get; set; } /// <summary> /// 指定图像的文件格式 /// </summary> public ImageFormat ImageFormat { get; set; } public override void ExecuteResult(ControllerContext context) { if (Image == null) throw new ArgumentNullException("Image"); if (ImageFormat == null) throw new ArgumentNullException("ImageFormat"); context.HttpContext.Response.Clear(); if (ImageFormat.Equals(ImageFormat.Gif)) context.HttpContext.Response.ContentType = "image/gif"; else if (ImageFormat.Equals(ImageFormat.Jpeg)) context.HttpContext.Response.ContentType = "image/jpeg"; else if (ImageFormat.Equals(ImageFormat.Png)) context.HttpContext.Response.ContentType = "image/png"; else if (ImageFormat.Equals(ImageFormat.Bmp)) context.HttpContext.Response.ContentType = "image/bmp"; else if (ImageFormat.Equals(ImageFormat.Tiff)) context.HttpContext.Response.ContentType = "image/tiff"; else if (ImageFormat.Equals(ImageFormat.Icon)) context.HttpContext.Response.ContentType = "image/vnd.microsoft.icon"; else if (ImageFormat.Equals(ImageFormat.Wmf)) context.HttpContext.Response.ContentType = "image/wmf"; Image.Save(context.HttpContext.Response.OutputStream, ImageFormat); } }
后台代码如下：
#region MVC Chart public ActionResult MVCChart() { return View(); } public ActionResult ChartView() { return PartialView(); } public ActionResult ZhuChart() { System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart(); chart.Width = 750; chart.Height = 400; chart.RenderType = RenderType.ImageTag; chart.Palette = ChartColorPalette.BrightPastel; Title t = new Title("活动数量分布", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105)); chart.Titles.Add(t); chart.ChartAreas.Add("Subject"); chart.ChartAreas[0].AxisX.Interval = 1; //设置X轴坐标的间隔为1 chart.ChartAreas[0].AxisX.IntervalOffset = 1; //设置X轴坐标偏移为1 chart.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false; //设置是否交错显示,比如数据多的时间分成两行来显示 chart.Series.Add("Subject"); chart.Series["Subject"].Label = "#VAL"; chart.Series["Subject"].LegendText = "活动数量"; List<string> actives = new List<string>(); for (int i = 0; i < 10; i++) { actives.Add("活动" + i.ToString()); } Random rd = new Random(); foreach (var item in actives) { chart.Series["Subject"].Points.AddXY(item, rd.Next(50, 80)); } chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; chart.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105); chart.BorderlineDashStyle = ChartDashStyle.Solid; chart.BorderWidth = 2; // chart.BackColor = Color.Green; chart.Legends.Add("Legend1"); MemoryStream stream = new MemoryStream(); chart.SaveImage(stream, ChartImageFormat.Jpeg); return new ImageResult(Image.FromStream(stream), ImageFormat.Jpeg); } public ActionResult pieChart() { List<string> xValues = new List<string>(); List<string> yValues = new List<string>(); List<string> actives = new List<string>(); for (int i = 0; i < 10; i++) { actives.Add("活动" + i.ToString()); } Random rd = new Random(); foreach (var item in actives) { xValues.Add(item); yValues.Add(rd.Next(10, 30).ToString()); } System.Web.UI.DataVisualization.Charting.Chart pieChar = new System.Web.UI.DataVisualization.Charting.Chart(); pieChar.Series.Add("Default"); pieChar.Series["Default"].Points.DataBindXY(xValues, yValues); pieChar.Series["Default"].Label = "#AXISLABEL #VAL"; pieChar.Series["Default"].LegendText = "#AXISLABEL #PERCENT{P1}"; Title pieTitle = new Title("加分项活动比例", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105)); pieChar.Titles.Add(pieTitle); pieChar.Width = 380; // Set Doughnut chart type pieChar.Series["Default"].ChartType = SeriesChartType.Pie; // Set labels style pieChar.Series["Default"]["PieLabelStyle"] = "Inside"; // Set Doughnut radius percentage pieChar.Series["Default"]["DoughnutRadius"] = "70"; // Explode data point with label "Italy" //pieChar.Series["Default"].Points[4]["Exploded"] = "true"; // Enable 3D pieChar.ChartAreas.Add("ChartArea1"); pieChar.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; // Disable the Legend pieChar.Legends.Add("Lengenedpie"); pieChar.Legends[0].Enabled = true; MemoryStream stream = new MemoryStream(); pieChar.SaveImage(stream, ChartImageFormat.Jpeg); return new ImageResult(Image.FromStream(stream), ImageFormat.Jpeg); } public ActionResult lineChart() { System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart(); chart.Width = 830; chart.Height = 500; chart.RenderType = RenderType.ImageTag; chart.Palette = ChartColorPalette.BrightPastel; Title t = new Title("污水处理实时曲线", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105)); chart.Titles.Add(t); chart.ChartAreas.Add("Default"); List<string> actives = new List<string>(); for (int i = 0; i < 5; i++) { actives.Add("活动" + i.ToString()); } Random rd = new Random(); foreach (var item in actives) { chart.Series.Add(item.ToString()); chart.Series[item.ToString()].LegendText = item; chart.Series[item.ToString()].ChartType = SeriesChartType.Line; chart.Series[item.ToString()].XValueType = ChartValueType.DateTime; for (int i = 0; i < 10; i++) { chart.Series[item.ToString()].Points.AddXY(DateTime.Now.AddDays(0 - i).ToOADate(), rd.Next(10, 100)); } } chart.ChartAreas["Default"].AxisX.LabelStyle.IsStaggered = false; chart.ChartAreas["Default"].AxisX.LabelStyle.Format = "HH:mm"; chart.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105); chart.BorderlineDashStyle = ChartDashStyle.Solid; chart.BorderWidth = 2; chart.Legends.Add("Legend1"); chart.ChartAreas["Default"].AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount; MemoryStream stream = new MemoryStream(); chart.SaveImage(stream, ChartImageFormat.Jpeg); return new ImageResult(Image.FromStream(stream), ImageFormat.Jpeg); } #endregion
前台页面加载图表可以用ajax,代码如下：
MVCChart 页面的代码： @{ ViewBag.Title = "MVCChart"; } <script type="text/javascript"> $(function () { loadChart(); }) function loadChart() { $("#zhu").load("/Report/ChartView"); } </script> <div id="zhu" style="width:100%"></div> ChartView的页面代码： @{ ViewBag.Title = "ZhuView"; } <table style="width: 100%"> <tr> <td> <img src="@Url.Action("ZhuChart")" alt="柱状图"/> </td> </tr> <tr> <td> <img src="@Url.Action("pieChart")" alt="饼状图"/> </td> </tr> <tr> <td> <img src="@Url.Action("lineChart")" alt="曲线图"/> </td> </tr> </table>
