ASP.NET MVC 3 Beta初体验之超酷的Chart
时间：2010-10-20 来源：麒麟
1、配置Chart的数据源
给Chart配置数据源大概有三种方式。
第一种：使用数组
示例：
Controller代码：
public ActionResult BasicChart()
{
return View();
}
BasicChart.cshtml代码：
<p>
@{
var key = new Chart(width: 600, ">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。
<p><img src="BasicChart" /> </p>
效果：有了站点样式和母板：
第二种方式：数据库查询
示例：
@{ var db = Database.Open("SmallBakery");
var data = db.Query("SELECT Month, Number FROM Employee");
var key = new Chart(width: 600, ">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, ">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, ">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, ">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,">400,templatePath: filePathName);
}
else {
chartXml = new Chart(width: 600,">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如下：
代码
<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>
总结：本文就三个方面介绍了ASP.NET MVC 3 Beta中的Chart。包括它的数据源配置、显示以及保存。
参考：http://www.asp.net/webmatrix/tutorials/7-displaying-data-in-a-chart
本文完整代码：http://files.cnblogs.com/zhuqil/MvcApplicationChart.rar
相关阅读 更多 +
