ASP.NETMVC3Beta中超酷的Chart

前面一篇文章：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代码：

 
 
 
 
    
  
  
  
  
  1. public ActionResult BasicChart(){           
    2. 
  
  
  
  
  2.    return View();       
    3. 
  
  
  
  
  3.    } 
    4.

BasicChart.cshtml代码：

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

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

运行效果：

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

定义一个Action：

 
 
 
 
    
  
  
  
  
  1. public ActionResult ShowBasicChart()  
    2. 
  
  
  
  
  2.  {          
    3. 
  
  
  
  
  3.     return View();     
    4. 
  
  
  
  
  4.      } 
    5.

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

 
 
 
 
    
  
  
  
  
  1.  
     
    2.

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

第二种方式：数据库查询

示例：

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

第三种方式：XML示例：

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

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

2、Chart的显示：

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

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

效果：

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

代码

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

效果：

3、Chart保存

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

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

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

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

将Chart保存为图片：

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

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

保存之后的图片：

将Chart保存为保存为XML：

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

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

代码

 
 
 
 
    
  
  
  
  
  1.     
    2. 
  
  
  
  
  2.       
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.           
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.          
    7. 
  
  
  
  
  7.          
    8. 
  
  
  
  
  8.          
    9. 
  
  
  
  
  9.          
    10. 
  
  
  
  
  10.          
    11. 
  
  
  
  
  11.          
    12. 
  
  
  
  
  12.          
    13. 
  
  
  
  
  13.        
    14. 
  
  
  
  
  14.       
    15. 
  
  
  
  
  15.     
    16. 
  
  
  
  
  16.     
    17. 
  
  
  
  
  17.      
    18. 
  
  
  
  
  18.      
    19. 
  
  
  
  
  19.     
    20. 
  
  
  
  
  20.     
    21. 
  
  
  
  
  21.     
    22. 
  
  
  
  
  22.       
    23. 
  
  
  
  
  23.     
    24. 
  
  
  
  
  24.  
    25.

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

文章标题：ASP.NETMVC3Beta中超酷的Chart
当前链接：http://www.mswzjz.cn/qtweb/news46/411746.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

外贸网站建设知识

行业网站建设

佑馨产后护理　　 　达州主机托管　　 　圣与卓设计　　 　企业网站维护　　 　营销型网站建设　　 　德阳发电机　　 　成都保温材料　　 　添翼二手车鉴定评估　　 　成都网站改版公司　　 　南充网站建设　　 　联通机房服务器托管　　 　成都定制网站　　 　成都租用服务器　　 　成都网站推广营销　　 　网站设计　　 　网站解决方案　　 　四川艺考培训　　 　眉山主机托管　　 　成都网站维护公司　　 　成都网站推广