ASP.NET MVC 3 Beta中超酷的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代碼：
- public ActionResult BasicChart(){
- return View();
- }
BasicChart.cshtml代碼：
- <p> @{
- var key = new Chart(width: 600, height: 400)
- .AddTitle("人員流動(dòng)情況")
- .AddSeries(name: "Employee",xValue: new[] {
- "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"}, yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})
- .Write();
- }</p>
從上面代碼可以看到，我給 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：
- public ActionResult ShowBasicChart()
- {
- return View();
- }
View代碼：定義一個(gè)img標(biāo)簽，將src改成生成圖片的action。
- <p><img src="BasicChart" /> </p>
效果：有了站點(diǎn)樣式和母板：
第二種方式：數(shù)據(jù)庫查詢
示例：
- @{
- var db = Database.Open("SmallBakery");
- var data = db.Query("SELECT Month, Number FROM Employee");
- var key = new Chart(width: 600, height: 400)
- .AddTitle("人員流動(dòng)")
- .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(); }
由于這三種方式都類似，了解其中一種，其余的類似，就不細(xì)說了，為了簡單起見，下面的例子都是用數(shù)組的方式來實(shí)現(xiàn)。
2、Chart的顯示：
chartType屬性：它有一個(gè)chartType屬性，可以定義顯示的方式。比如將上面的例子的chartType定義為"Pie"，就顯示為餅圖。
- @{
- var key = new Chart(width: 600, height: 400)
- .AddTitle("人員流動(dòng)情況")
- .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("人員流動(dòng)情況")
- .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)將根據(jù)key從緩存中取出Chart，cachedChart.SaveToCache(key: chartKey,minutesToCache: 2,slidingExpiration: false)是將Chart緩存起來?？聪聢D：
當(dāng)再次請求的時(shí)候，就直接從緩存中取數(shù)據(jù)。設(shè)置緩存兩分鐘，兩分鐘之后這次的緩存失效。
將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轉(zhuǎn)換成Chart。通過SaveXml可以將Chart保存為XML。生成的XML如下：
代碼
- <Chart Width="600" Height="400">
- <Series>
- <Series Name="Employee" XValueType="String" YValueType="String" ChartArea="Default" AxisLabel="Name">
- <Points>
- <DataPoint YValues="2" AxisLabel="一月份" />
- <DataPoint YValues="6" AxisLabel="二月份" />
- <DataPoint YValues="4" AxisLabel="三月份" />
- <DataPoint YValues="5" AxisLabel="四月份" />
- <DataPoint YValues="3" AxisLabel="五月份" />
- <DataPoint YValues="4" AxisLabel="六月份" />
- <DataPoint YValues="9" AxisLabel="七月份" />
- <DataPoint YValues="2" AxisLabel="八月份" />
- <DataPoint YValues="5" AxisLabel="九月份" />
- </Points>
- </Series>
- </Series>
- <ChartAreas>
- <ChartArea Name="Default">
- </ChartArea>
- </ChartAreas>
- <Titles>
- <Title Name="Title1" Text="Chart Title -- Saved at 2010/10/19 23:41:02">
- </Title>
- </Titles></Chart>
總結(jié)：本文就三個(gè)方面介紹了ASP.NET MVC 3 Beta中的Chart。包括它的數(shù)據(jù)源配置、顯示以及保存。
原文標(biāo)題：ASP.NET MVC 3 Beta初體驗(yàn)之超酷的Chart
鏈接：http://www.cnblogs.com/zhuqil/archive/2010/10/20/asp-net-mvc-3-chart.html
【編輯推薦】
