前面一篇文章：ASP.NET MVC 3 Beta初体验之WebGrid介绍了WebGrid控件的使用，ASP.NET MVC 3 Beta中才内置Chart的。这篇文章中将介绍Chart的使用。包括Chart数据源的配置、Chart的显示、Chart保存三个方面。Chart是很多系统中使用，所以在ASP.NET MVC 3 Beta初体验之中介绍它是很有必要的。

1、配置Chart的数据源

给Chart配置数据源大概有三种方式。

***种：使用数组示例：Controller代码：

public ActionResult BasicChart(){           
   return View();       
   } 

BasicChart.cshtml代码：

    @{      
var key = new Chart(width: 600, height: 400)      
.AddTitle("人员流动情况")      
.AddSeries(name: "Employee",xValue: new[] {    
"一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"}, yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})     
 .Write();     
 }
 

从上面代码可以看到，我给 Chart的xValue配置了一个数组，相应的yValue也配置了一个相应的数组。

运行效果：

此时，我们发现这个图形是单独显示的，没有站点的样式和母版。下面实现将这个图形显示在一个页面中。 

定义一个Action：

public ActionResult ShowBasicChart()  
 {          
    return View();     
     } 

View代码：定义一个img标签，将src改成生成图片的action。

效果：有了站点样式和母板：

第二种方式：数据库查询

示例：

@{       
var db = Database.Open("SmallBakery");       
var data = db.Query("SELECT Month, Number FROM Employee");       
var key = new Chart(width: 600, height: 400)           
.AddTitle("人员流动")          
.DataBindTable(dataSource: data, xField: "Month")           
.Write(); } 

第三种方式：XML示例：

@using System.Data; @{       
var dataSet = new DataSet();       
dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd"));       
dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml"));       
var dataView = new DataView(dataSet.Tables[0]);       
var key = new Chart(width: 600, height: 400)           
.AddTitle("Sales Per Employee")           
.AddSeries("Default", chartType: "Pie",             
xValue: dataView, xField: "Name",               
yValues: dataView, yFields: "Sales")           
.Write(); } 

由于这三种方式都类似，了解其中一种，其余的类似，就不细说了，为了简单起见，下面的例子都是用数组的方式来实现。

2、Chart的显示：

chartType属性：它有一个chartType属性，可以定义显示的方式。比如将上面的例子的chartType定义为"Pie"，就显示为饼图。

@{              
var key = new Chart(width: 600, height: 400)                  
.AddTitle("人员流动情况")                  
.AddSeries(name: "Employee",chartType: "Pie", xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"}, yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})                
.Write();         
} 

效果：

template属性：它可以定义背景模板，如修改代码为：template: ChartTheme.Green

代码

 @{      
var key = new Chart(width: 600, height: 400,template: ChartTheme.Green)      
.AddTitle("人员流动情况")      
.AddSeries(name: "Employee",xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"}, yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})      
.Write();    } 

效果：

3、Chart保存

将Chart保存到缓存中：看下面代码：

@{           
var chartKey = Request["key"];       
if (chartKey != null)       
{                      
var cachedChart = Chart.GetFromCache(key: chartKey);                
if (cachedChart == null)               
{                     
cachedChart = new Chart(600, 400);                       
cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now);                    
cachedChart.AddSeries(                                
name: "Employee",                    
axisLabel: "Name",                           
xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"},                    
yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"});                         
cachedChart.SaveToCache(key: chartKey,minutesToCache: 2,slidingExpiration: false);                   
 }                    
Chart.WriteFromCache(chartKey);      
   }    } 

Chart.GetFromCache(key: chartKey)将根据key从缓存中取出Chart，cachedChart.SaveToCache(key: chartKey,minutesToCache: 2,slidingExpiration: false)是将Chart缓存起来。看下图：

当再次请求的时候，就直接从缓存中取数据。设置缓存两分钟，两分钟之后这次的缓存失效。

将Chart保存为图片：

使用下面代码将图形保存为图片：

    @{      
var filePathName = "_ChartFiles/chart01.jpg";      
if (!File.Exists(Server.MapPath(filePathName)))      
{      
var chartImage = new Chart(600, 400);    
chartImage.AddTitle("Chart Title");    
chartImage.AddSeries(      
name: "Employee",    
axisLabel: "Name",    
xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"},      
yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"});    
chartImage.Save(path: filePathName);    
  }    } 

保存之后的图片：

将Chart保存为保存为XML：

    @{     
Chart chartXml;      
var filePathName = "_ChartFiles/XmlChart.xml";      
if (File.Exists(Server.MapPath(filePathName)))     
 {    chartXml = new Chart(width: 600,height: 400,templatePath: filePathName);    
  }      
else {      
chartXml = new Chart(width: 600,height: 400);    
chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now);      
chartXml.AddSeries(     
name: "Employee",    axisLabel: "Name",    
xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"},      
yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"});    
chartXml.SaveXml(path: filePathName);    
  }    
  chartXml.Write();    } 

从上面代码我们可以看到，可以通过templatePath将XML转换成Chart。通过SaveXml可以将Chart保存为XML。生成的XML如下：

代码

总结：本文就三个方面介绍了ASP.NET MVC 3 Beta中的Chart。包括它的数据源配置、显示以及保存。

原文标题：ASP.NET MVC 3 Beta初体验之超酷的Chart

链接：http://www.cnblogs.com/zhuqil/archive/2010/10/20/asp-net-mvc-3-chart.html

【编辑推荐】

1. 详解ASP.NET MVC 3 beta新特性
2. ASP.NET MVC 3让依赖注入实现得更简单
3. 详解ASP.NET MVC 3 beta新特性
4. ASP.NET MVC 3新特性与NuPack功能详解
5. .NET开发人员应该关注的七个开源项目