在大多数情况下，我们的Web程序不仅仅需要给用户提供具体数据，在一些情况下，我们还需要给高级的用户或管理者提供数据汇总和分析图表之类的功能。

如果我们不想显示一大堆烦心的数据，希望通过饼图或条形图来直观地显示数据，这是我们可以考虑使用图表控件显示。

在接下来的文章中，我们将向大家介绍数据仪表板程序的实现。

之前有一篇文章关于StackOverflow上的编程趋势，它通过条形和区域图，向我们展示了Stackoverflow上的热门的问题标签。

图1 Stackoverflow的热门标签

通过上图，我们可以直观地了解Stackoverflow上的热门标签的变化趋势，现在，我们通过仪表程序实现同样的功能。

在仪表程序界面中，我们会通过饼状图、区域图和条形图显示数据，这里我们使用Google Charts控件来显示饼状图、区域图和条形图数据图。

Google Charts通过Javascript实现动态图片的绘制，它的使用非常简便，我们只需给相应的绘图函数传递相应的数据，就可以生成相应的数据图表了。

UI设计

图2 Dashboard界面

现在，我们要在主界面（Dashboard）中，显示数据的饼状图、区域图和条形图，那么我们使用Google Charts控件动态地把三种图形加载到Index.cshtml页面中，下面是Index.cshtml页面代码：

上面，我们定义了三个div元素，Index.cshtml页面动态地加载Dashboard_Pie、Dashboard_AreaChart以及Dashboard_ColumnChart的内容。

接下来，我们要定义Dashboard_Pie（饼状图）、Dashboard_AreaChart（区域图）和Dashboard_ColumnChart（条形图）页面，在定义数据图界面之前，首先让我们介绍Google Charts的使用。

Javascript
前面我们提到Google Charts的使用十分方便，首先我们需要引用jsapi库，在页面代码中添加如下代码：

当Google的visualization库加载完毕后，访问回调函数timerStart()，然后使用setInterval()方法每隔1s就调用drawColumnChart()绘制新的柱状图。

图8 柱状图

现在，我们通过Timer()函数实时的访问API接口，数据通过柱状图动态地显示出来。

页面样式
现在，我们已经完成了饼状图和柱状图，接下来，我们需要给仪表程序添加一些简单的CSS效果，具体代码如下：

现在，我们重新运行程序查看页面效果。

图10仪表程序

在本文中，我们通过使用ASP.NET MVC和EF的Database First实现了简单的仪表程序，使用Google Charts控件来显示数据图，这只是一个简单的程序，我们还有很大的改善空间，提供一个内容丰富和功能强大的程序是每个程序员的目标。

以上就是本文的全部内容，希望对大家的学习有所帮助。