ASP.NET MVC实现仪表程序

时间：2021-05-26

在大多数情况下，我们的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://plete: function() { cnt = cnt + 1; } }); }</script>

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

图8 柱状图

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

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

.pageHeader{ height: 20px; background-color: #2C2C2C; padding: 10px 10px; margin-bottom: 10px; color: White; position: relative;} .pageHeader h1 { font: normal 1.2em Arial; color: White; margin: 0; padding: 0; } .pageHeader .platformular { position: absolute; top: 10px; right: 10px; }.pageBody{ margin: 0 10px;}.pageFooter{ clear: both; padding-top: 10px; width: 100%; text-align: center; font-size: 0.8em; color: #686868; margin: 25px 0 0 0; border-top: solid 1px #e7e7e7;}

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

图10仪表程序

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章