web开发经验—MVC 图表Chart

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>