日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
ASP.NETMVC3Beta中超酷的Chart

前面一篇文章：ASP.NET MVC 3 Beta初體驗(yàn)之WebGrid介紹了WebGrid控件的使用，ASP.NET MVC 3 Beta中才內(nèi)置Chart的。這篇文章中將介紹Chart的使用。包括Chart數(shù)據(jù)源的配置、Chart的顯示、Chart保存三個(gè)方面。Chart是很多系統(tǒng)中使用，所以在ASP.NET MVC 3 Beta初體驗(yàn)之中介紹它是很有必要的。

1、配置Chart的數(shù)據(jù)源

給Chart配置數(shù)據(jù)源大概有三種方式。

***種：使用數(shù)組示例：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("人員流動(dòng)情況")      
    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配置了一個(gè)數(shù)組，相應(yīng)的yValue也配置了一個(gè)相應(yīng)的數(shù)組。

運(yùn)行效果：

此時(shí)，我們發(fā)現(xiàn)這個(gè)圖形是單獨(dú)顯示的，沒有站點(diǎn)的樣式和母版。下面實(shí)現(xiàn)將這個(gè)圖形顯示在一個(gè)頁面中。 

定義一個(gè)Action：

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

View代碼：定義一個(gè)img標(biāo)簽，將src改成生成圖片的action。

 
 
 
 
    
  
  
  
  
  1.  
     
    2.

效果：有了站點(diǎn)樣式和母板：

第二種方式：數(shù)據(jù)庫查詢

示例：

 
 
 
 
    
  
  
  
  
  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("人員流動(dòng)")          
    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.

由于這三種方式都類似，了解其中一種，其余的類似，就不細(xì)說了，為了簡(jiǎn)單起見，下面的例子都是用數(shù)組的方式來實(shí)現(xiàn)。

2、Chart的顯示：

chartType屬性：它有一個(gè)chartType屬性，可以定義顯示的方式。比如將上面的例子的chartType定義為"Pie"，就顯示為餅圖。

 
 
 
 
    
  
  
  
  
  1. @{              
    2. 
  
  
  
  
  2. var key = new Chart(width: 600, height: 400)                  
    3. 
  
  
  
  
  3. .AddTitle("人員流動(dòng)情況")                  
    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("人員流動(dòng)情況")      
    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)將根據(jù)key從緩存中取出Chart，cachedChart.SaveToCache(key: chartKey,minutesToCache: 2,slidingExpiration: false)是將Chart緩存起來。看下圖：

當(dāng)再次請(qǐng)求的時(shí)候，就直接從緩存中取數(shù)據(jù)。設(shè)置緩存兩分鐘，兩分鐘之后這次的緩存失效。

將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轉(zhuǎn)換成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.

總結(jié)：本文就三個(gè)方面介紹了ASP.NET MVC 3 Beta中的Chart。包括它的數(shù)據(jù)源配置、顯示以及保存。


分享標(biāo)題：ASP.NETMVC3Beta中超酷的Chart
網(wǎng)站鏈接：http://www.5511xx.com/article/cdeiesh.html