ASP.NET MVC 3 Beta初體驗之超酷的Chart

作者: 麒麟來源: 博客園發布時間: 2010-10-21 17:48 閱讀: 3459 次推薦: 0 原文鏈接 [收藏]

摘要：本文將介紹到ASP.NET MVC 3 Beta中才內置的Chart，包括Chart數據源的配置、Chart的顯示、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代碼：

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

BasicChart.cshtml代碼：

<p>
@{
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();
}
</p>

　　從上面代碼可以看到，我給 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如下：

代碼