在大多数情况下，我们的Web程序不仅仅需要给用户提供具体数据，在一些情况下，我们还需要给高级的用户或管理者提供数据汇总和分析图表之类的功能。
如果我们不想显示一大堆烦心的数据，希望通过饼图或条形图来直观地显示数据，这是我们可以考虑使用图表控件显示。
在接下来的文章中，我们将向大家介绍数据仪表板程序的实现。
之前有一篇文章关于StackOverflow上的编程趋势，它通过条形和区域图，向我们展示了Stackoverflow上的热门的问题标签。
图1 Stackoverflow的热门标签
通过上图，我们可以直观地了解Stackoverflow上的热门标签的变化趋势，现在，我们通过仪表程序实现同样的功能。
在仪表程序界面中，我们会通过饼状图、区域图和条形图显示数据，这里我们使用Google Charts控件来显示饼状图、区域图和条形图数据图。
Google Charts通过Javascript实现动态图片的绘制，它的使用非常简便，我们只需给相应的绘图函数传递相应的数据，就可以生成相应的数据图表了。
UI设计
图2 Dashboard界面
现在，我们要在主界面（Dashboard）中，显示数据的饼状图、区域图和条形图，那么我们使用Google Charts控件动态地把三种图形加载到Index.cshtml页面中，下面是Index.cshtml页面代码：
<!-- Dashboard UI START -->
<body>
<div>
@{ Html.RenderAction("Dashboard_Pie", "DashBoard"); }
</div>
<div>
@{ Html.RenderAction("Dashboard_AreaChart", "DashBoard"); }
</div>
<div>
@{ Html.RenderAction("Dashboard_ColumnChart", "DashBoard"); }
</div>
</body>
<!-- Dashboard UI END -->
</div>
上面，我们定义了三个div元素，Index.cshtml页面动态地加载Dashboard_Pie、Dashboard_AreaChart以及Dashboard_ColumnChart的内容。
接下来，我们要定义Dashboard_Pie（饼状图）、Dashboard_AreaChart（区域图）和Dashboard_ColumnChart（条形图）页面，在定义数据图界面之前，首先让我们介绍Google Charts的使用。
Javascript
前面我们提到Google Charts的使用十分方便，首先我们需要引用jsapi库，在页面代码中添加如下代码：
<!-- Adds Google js api reference.--> <script type="text/javascript" src="https://www.google.com/jsapi"></script></div>
Google的JSAPI，不仅可以加载Google自身提供的AJAX API（如：Google Map API、Google Search API和Google Earth API），它还可以加载各种常用的JS库（如：jQuery、jQuery UI、Prototype、MooTools和Dojo等）。
现在，我们在页面中添加如下Javascript代码，引用Google的visualization库：
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawPieChart);
</script>
</div>
上面，我们使用google的load()方法加载了visualization库，并且定义了加载成功后的回调函数为drawPieChart()。
也许有人会问：“为什么不直接用Google CDN中提供Javascript库呢？”有两个原因，首先我们在Google CDN中没有找到和visualization库相关的引用地址（如有请告诉一下），其次，google的load()方法会加载一系列相关的资源（如：Javascript和CSS），这样我们就无需一个个引用了。
前面，我们定义了回调函数drawPieChart()，但还没有实现该方法，接下来，我们需要实现回调函数drawPieChart()，它负责获绘制数据图，具体实现如下：
/**
* Draws the pie chart.
**/
function drawPieChart() {
// Gets data from GetLanguageRank().
$.ajax({
type: 'GET',
dataType: 'json',
url: '<%= Url.Content("") %>',
data: {},
success: function(data) {
var dt = new google.visualization.DataTable();
dt.addColumn('string', 'Language');
dt.addColumn('number', 'Question');
// Adds data.
for (var i = 0; i < data.length; i++) {
dt.addRow([data[i].Name, data[i].Question]);
}
var options = {
title: "Top 25 programming language"
};
// Draws pie implemention.
var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
chart.draw(dt, options);
},
error: function(xhr, textStatus, e) {
console.log('Status: ' + textStatus + ' Error: ' + e.toString());
},
complete: function() {
}
});
}
</div>
上面，我们实现了回调函数drawPieChart()，它通过调用$.ajax()方法从后端中获取数据，如果数据获取成功，就把数据传递给draw()方法绘制数据图表。
接着，我们实现Dashboard_Pie数据图界面，具体代码如下：
<!-- Pie chart page --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form2" runat="server"> <div id="pieChart"> </div> </form> </body> </html></div>
上面，我们在form元素中添加了一个div元素，由于我们在回调函数drawPieChart()中，指定了饼状图的加载位置，所以我们需要在页面中添加饼状图的div元素。
前面，我们提到回调函数drawPieChart()，通过$.ajax()方法从后端中获取数据，现在，我们需要提供API方法，让客户端通过调用API获取相应的数据。
这里，我们使用Stackoverflow Jan/01/2010到July/01/2013的热门标签数据。
由于数据是CSV格式的，所以我们可以使用Excel查看数据。
图3 热门标签数据
通过上图中的数据，我们定义Language类，它包含四个字段分别是Id、Name、Question和CreateOn，具体定义如下：
图4 Language类
/// <summary>
/// The language model.
/// </summary>
public class QuestionTag
{
public int Id { get; set; }
public string Name { get; set; }
public int Question { get; set; }
public DateTime CreateOn { get; set; }
}
</div>
上面，我们定义了QuestionTag类，接下来，我们需要定义控制器类，它负责返回后端数据，所以我们在Controllers文件中创建DashboardController类，并且我们添加GetLanguageRank()方法，具体实现如下：
图5 DashboardController类
/// <summary>
/// Gets language rank data.
/// </summary>
/// <returns>JSON arrary.</returns>
public JsonResult GetLanguageRank()
{
// Gets data from database.
}
</div>
导入数据
上面，我们定义了DashboardController类，它包含GetLanguageRank()方法，接下来我们把CSV数据保存到数据库中。首先，我们在数据库中创建数据表，具体SQL代码如下：
-- ============================================= -- Description: Table for st
您可能想查找下面的文章:
- 详解ASP.NET MVC 常用扩展点：过滤器、模型绑定
- ASP.NET MVC从视图传参到控制器的几种形式
- ASP.NET MVC 4 中的JSON数据交互的方法
- ASP.NET MVC制作404跳转实例（非302和200）
- 详解ASP.NET MVC 利用Razor引擎生成静态页
- 详解ASP.NET MVC 解析模板生成静态页（RazorEngine）
- ASP.NET MVC4 利用uploadify.js多文件上传
- ASP.NET mvc4中的过滤器的使用
- Asp.net MVC下使用Bundle合并、压缩js与css文件详解
- 详解Asp.Net MVC——控制器与动作(Controller And Action)