在大多数情况下，我们的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元素，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>
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>
上面，我们使用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() { } }); }
上面，我们实现了回调函数drawPieChart()，它通过调用$.ajax()方法从后端中获取数据，如果数据获取成功，就把数据传递给draw()方法绘制数据图表。
接着，我们实现Dashboard_Pie数据图界面，具体代码如下：