ASP.NET MVC中图表控件的使用方法_.net

微软发布了一个强大的asp.net的图表控件，支持丰富的图表选项设置-包括列，点，泡沫，饼图，圆环图，金字塔，漏斗，盒形图，面积，范围，ajax的互动，以及更多。microsoft图表控件示例项目包括asp.net页的图表样本超过200个。在这篇文章中，我将展示如何在asp.net mvc中使用图表控件。

这里介绍一个非常简单的项目，显示了一个类的结果比较。两个字段 - id（这是唯一的一个学生）和gpa（平均成绩） - 代表一个特定的学生的结果。各种图表结果显示，学生的结果进行比较。我希望把重点放在如何轻松地显示相同的数据不同的结果。在这个项目中，您可以添加，编辑和删除学生的成绩，并动态显示的变化。

要运行该项目，必须安装以下微软net framework 3.5的microsoft图表控件组件。

代码开始，你将需要引用的system.web.ui.datavisualization程序集 。

一旦你这样做，这是相当多的简单图表添加到视图页面。

<img src="/chart/createchart?charttype=<%=system.web.ui.datavisualization.charting.seriescharttype.column%>" alt="" />

首先定义一个controller,提供以下方法实现

#region chart component 

public fileresult createchart(seriescharttype charttype) 
{ 
ilist<resultmodel> peoples = _resultservice.getresults(); 
chart chart = new chart(); 
chart.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(peoples,charttype)); 
chart.chartareas.add(createchartarea()); 

memorystream ms = new memorystream(); 
chart.saveimage(ms); 
return file(ms.getbuffer(), @"image/png"); 
} 

[nonaction] 
public title createtitle() 
{ 
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

图表类的各种属性，可以控制宽度，高度，边框颜色，背景颜色，皮肤，调色板，等。最终形成图片格式展现在页面。

这里介绍的项目是asp.net mvc的图表控件的一个小demo示例,最终展示如下：