在大多数情况下，我们的Web程序不仅需要为用户提供特定的数据，还需要为高级用户或管理人员提供数据汇总、图表分析等功能。

如果不想显示很多烦人的数据，我们希望通过饼图或条形图直观地显示数据，这就是为什么我们可以考虑使用图表控件来显示。

在下面的文章中，我们将介绍数据仪表板程序的实现。

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

1堆栈溢出的热标签。

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

在仪器程序界面，我们将通过饼图、面积图和条形图显示数据。这里，我们使用谷歌图表控件来显示饼图、面积图和条形图数据图表。

Google Charts通过Javascript绘制动态图片，非常好用。我们只需要将相应的数据传递给相应的绘图函数，就可以生成相应的数据图表。

Ui设计

图2仪表板界面。

现在，我们想在主界面(Dashboard)中显示数据的饼图、面积图和条形图，所以我们使用Google Charts控件将这三种图形动态加载到Index.cshtml页面中。以下是Index.cshtml的页面代码：

！-仪表板UI START -正文div @{ Html。RenderAction('Dashboard_Pie '，' Dashboard ')；} /div div @{ Html。render action(' Dashboard _ area chart '，' Dashboard ')；} /div div @{ Html。render action(' Dashboard _ column chart '，' Dashboard ')；} /div/body！-仪表盘UI END -上面，我们定义了三个div元素。Index.cshtml页面动态加载Dashboard_Pie、Dashboard_AreaChart和Dashboard_ColumnChart的内容。

接下来，我们将定义Dashboard_Pie(饼图)、Dashboard_AreaChart(面积图)和Dashboard_ColumnChart(条形图)。在定义数据图表界面之前，我们先来介绍一下Google Charts的使用。

正如我们之前在Javascript中提到的，谷歌图表使用起来非常方便。首先，我们需要引用jsapi库，并将以下代码添加到页面代码中：

！-添加谷歌JSAPI引用。-脚本类型=' text/JavaScript ' src=' http:3359www.google.com/jsapi'/script谷歌的jsapi。它不仅可以加载谷歌自己提供的AJAX API(如谷歌地图API、谷歌搜索API、谷歌地球API)，还可以加载各种常用的JS库(如jQuery、jQuery UI、Prototype、MooTools、Dojo等)。).

现在，我们将以下Javascript代码添加到页面中，并参考谷歌的可视化库：

脚本类型=' text/JavaScript ' Google . load(' visualization '，' 1 '，{ package :[' corechart ']})；Google . setonloadcallback(drawPieChart)；/script上面，我们使用了google的load()方法加载可视化库，并将加载成功后的回调函数定义为drawPieChart()。

有人可能会问，“为什么不直接用谷歌CDN提供的Javascript库呢？”原因有二。首先，我们在谷歌CDN中找不到与可视化库相关的参考地址(如果你愿意，请告诉我)。其次，Google的load()方法会加载一系列相关的资源(比如Javascript和CSS)，所以我们不需要一一引用。

之前我们定义了回调函数drawPieChart()，但是这个方法还没有实现。接下来，我们需要实现回调函数drawPieChart()，它负责绘制数据图。具体实现如下：

/***绘制饼图。* */函数drawPieChart() { //从GetLanguageRank()获取数据。$.ajax({ type: 'GET '，dataType: 'json '，url: ' %=Url .内容(')% '，数据： {}，成功：函数(数据){ var dt=new Google。可视化。datatable()；dt.addColumn('字符串','语言');dt.addColumn('数字','问题');//添加数据for(var I=0；一。数据。长度；I){ dt。添加行([数据[i].姓名、数据[i].问题]);} var选项={ title: 'Top 25编程语言' };//绘制饼图实现var图表=新谷歌。可视化。pieChart(文档。getelementbyid(' PieChart ')；chart.draw(dt，options)；}，错误：函数(xhr，textStatus，e){控制台。日志(' status : ' textStatus '错误： ' e . tostring())；}，完成：函数(){ } })；}上面，我们实现了回调函数drawPieChart()，它通过调用$.ajax()方法从后端中获取数据，如果数据获取成功，就把数据传递给绘制()方法绘制数据图表。

接着，我们实现仪表板_饼图数据图界面，具体代码如下：

！-饼图页面-!DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head id=' head 1 ' runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title/head body表单id=' form 2 ' runat=' server ' div id=' Piechart '/div/form/body/html上面，我们在形式元素中添加了一个差异元素，由于我们在回调函数绘图图表()中，指定了饼状图的加载位置，所以我们需要在页面中添加饼状图的差异元素。

前面，我们提到回调函数drawPieChart()，通过$.ajax()方法从后端中获取数据，现在，我们需要提供应用程序接口方法，让客户端通过调用应用程序接口获取相应的数据。

这里，我们使用2010年一月一日到2013年七月一日的热门标签数据。

由于数据是战斗支援车格式的，所以我们可以使用超过查看数据。

图3热门标签数据

通过上图中的数据，我们定义语言类，它包含四个字段分别是身份证、姓名、问题和创建于，具体定义如下：

图四语言类

///摘要///语言模型////summarypublic类QuestionTag { public int Id { get设置；}公共字符串名称{获取设置；}公共int Question { get设置；}公共日期时间CreateOn { get设置；}}上面，我们定义了问题标签类，接下来，我们需要定义控制器类，它负责返回后端数据，所以我们在控制器文件中创建仪表板控制器类，并且我们添加GetLanguageRank()方法，具体实现如下：

图5仪表板控制器类

///摘要///获取语言排名数据////summary///returnsjsson数组./返回公共JsonResult GetLanguageRank(){//从数据库获取数据。}导入数据上面，我们定义了仪表板控制器类，它包含GetLanguageRank()方法，接下来我们把战斗支援车数据保存到数据库中。首先，我们在数据库中创建数据表，具体结构化查询语言代码如下：

-===============================================-描述：用于存储问题标记数据的表-==================================================================================[问题标签]([名称] [varchar](50)整理中文_中国_竞争情报_美国不为空，[问题] [int]不为空，[创建时间][日期时间]不为空)开[主]关关闭填充接着，我们战斗支援车数据导入到结构化查询语言服务器中，具体实现如下：

-===============================================-description :将csv数据导入数据库。-===========================================BULK INSERT QuestionTagsFROM ' c : Users Administrator Desktop Stackoverflow Tags data . CSV ' with(first row=2，- Start row不包括标头。FIELDTERMINATOR='，'，- CSV字段分隔符ROWTERMINATOR='n '，-用于将控件移动到下一行ERRORFILE=' C: 用户管理员桌面ErrorLog.csv '，TABLOCK)以上，我们直接使用SQL语句将CSV数据导入到数据库中，其中我们定义了导入数据的源文件和数据格式，并定义了ErrorLog文件来记录未能导入的数据。最后，我们在表QuestionTags中添加自增Id主键。

图6导入CSV数据。

ASP。现在，我们已经将数据存储在数据库中。接下来，我们将使用EF来获取数据库中的数据。任何接触过英孚的人都应该知道，英孚有三种编程模式：

数据库优先：模型优先：模型优先：代码优先：代码优先，因为我们之前已经定义了数据表，所以我们将使用数据库优先模型来访问数据库。

接下来，让我们实现GetLanguageRank()方法。具体代码如下：

///summary///获取语言排名数据。////summary////param name=' index '指定数据的范围，///比如index为0，则得到2010年1月1日到2010年2月2日的数据范围。////param///returns son Array/returns public JsonResult GetLanguageRank(int index=0){使用(var db=new DashboardDbContext()){ var result=(来自db中的标记。问题标签按标签排序。创建升序选择新的{标记。身份证标签。名字标签。问题，标签。CreateOn })。跳过((索引% 42) * 25)。以(25)为例。to list()；返回Json(结果，JsonRequestBehavior。allow get)；}}我们实现了GetLanguageRank()方法，根据索引值获取指定时间的数据，然后以JSON数据格式返回给客户端。

现在，我们已经实现了饼图(Dashboard_Pie)。接下来，让我们运行Index.cshtml页面，看看运行效果！

图7饼图。

我们注意到，图1是一个动态图，直观地展示了Stackoverflow热标签的变化趋势。我们应该如何实现数据图的动态生成？

其实问题转化为实时获取数据，然后生成数据图就可以了。如果我们想实时获取时间，我们可以考虑以下方法：

1.定时器()2。方法2:数据库实时方法数据(SqlDependency。其他(请分享好的方法)接下来，我们将使用Javascript中的Timer()函数定期访问GetLanguageRank()方法，因此需要修改Javascript代码，通过Timer()函数定期调用drawColumnChart()方法。具体实现如下：

脚本类型=' text/JavaScript ' Google。load(' visualization '，' 1 '，{ package :[' corechart ']})；谷歌。setonloadcallback(timerStart)；var cnt=0，t；函数timerStart(){ t=window。setinterval(绘制柱形图，1000)；}函数timerStop(){ clear time out(t)；}函数drawColumnChart() { $ .ajax({ type: 'GET '，dataType: 'json '，url: ' %=Url .内容(' ~/Dashboard/GetLanguageRank ')% '，数据： { index: cnt }，成功：函数（数据){ var dt=新谷歌。可视化。datatable()；dt.addColumn('字符串','语言');dt.addColumn('数字','问题');for(var I=0；一。数据。长度；I){ dt。添加行([数据[i].姓名、数据[i].问题]);} var dateTime=新日期(解析器(数据[0])。createon。subst(6)))；var选项={ title: '前25名编程语言on '(日期时间。getmonth()1)“/”datetime。getdate()“/”datetime。getfullyear()，//宽度： 600，高度： 500 }；var图表=新谷歌。可视化。柱形图(文档。getelementbyid('柱形图')；chart.draw(dt，options)；}，错误：函数(xhr，textStatus，e){ timerStop()；控制台。日志(' status : ' textStatus '错误： ' e . tostring())；}，完成：函数(){ CNT=CNT 1；} });}/脚本当谷歌的形象化库加载完毕后，访问回调函数timerStart()，然后使用setInterval()方法每隔1s就调用drawColumnChart()绘制新的柱状图。

图8柱状图

现在，我们通过计时器()函数实时的访问应用程序接口接口，数据通过柱状图动态地显示出来。

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

/*仪表盘APP CSS*/.pageHeader { height: 20px背景色-: # 2C 2C 2C；padding: 10px 10px边距-底部： 10px颜色：白色；相对位置：} .页眉h1 { font : normal 1.2em Arial颜色：白色；保证金： 0；padd : 0；} .页面标题平台{位置：绝对值；top: 10pxright: 10px}。pageBody { margin: 0 10px}。页面页脚{ clear:两者；衬垫-top : 10px；宽度： 100%;文本对齐：中心；font-size : 0.8 emcolor : # 686868 margin 3360 25px 0 0 0 border-top :实心1px # e7e7e7}现在，我们重新运行程序查看页面效果。

图10仪表程序

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

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