<!-- Pie chart page --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form runat="server"> <div> </div> </form> </body> </html>
上面，我们在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; } }
上面，我们定义了QuestionTag类，接下来，我们需要定义控制器类，它负责返回后端数据，所以我们在Controllers文件中创建DashboardController类，并且我们添加GetLanguageRank()方法，具体实现如下：
图5 DashboardController类
/// <summary> /// Gets language rank data. /// </summary> /// <returns>JSON arrary.</returns> public JsonResult GetLanguageRank() { // Gets data from database. }
导入数据
上面，我们定义了DashboardController类，它包含GetLanguageRank()方法，接下来我们把CSV数据保存到数据库中。首先，我们在数据库中创建数据表，具体SQL代码如下：
-- ============================================= -- Description: Table for storing question tag data -- ============================================= SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[QuestionTags]( [Name] [varchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL, [Question] [int] NOT NULL, [CreateOn] [datetime] NOT NULL ) ON [PRIMARY] GO SET ANSI_PADDING OFF
接着，我们CSV数据导入到SQL Server中，具体实现如下：
-- ============================================= -- Description: Imports csv data into database. -- ============================================= BULK INSERT QuestionTags FROM 'C:\Users\Administrator\Desktop\Stackoverflow Tags Data.csv' WITH ( FIRSTROW = 2, -- Start row excludes header. FIELDTERMINATOR = ',', --CSV field delimiter ROWTERMINATOR = '\n', --Use to shift the control to next row ERRORFILE = 'C:\Users\Administrator\Desktop\ErrorLog.csv'，? TABLOCK )
上面，我们直接使用SQL语句把CSV数据导入到数据库中，其中，我们定义了导入数据的源文件和数据格式，并且定义了ErrorLog文件记录导入失败的数据，最后，我们在表QuestionTags中添加自增型的Id主键。
图6 导入CSV数据
ASP.NET控制器
现在，我们已经把数据储存到数据库中了，接下来我们将使用EF获取数据库中的数据，接触过EF的应该都知道EF的编程模型有3种：
Database First：数据库先行
Model First：模型先行
Code First：代码先行
由于，前面我们已经把数据表定义好了，所以我们将使用数据库先行（Database First）模型对数据库进行访问。
接下来，让我们实现GetLanguageRank()方法，具体代码如下：
/// <summary> /// Gets language rank data. /// </summary> /// <param>Specifies the range of data, /// for instance, when index is 0, then get the data range from Jan/1/2010 till Feb/2/2010. /// </param> /// <returns>JSON Array</returns> public JsonResult GetLanguageRank(int index = 0) { using (var db = new DashboardDbContext()) { var result = (from tags in db.QuestionTags orderby tags.CreateOn ascending select new { tags.Id, tags.Name, tags.Question, tags.CreateOn }).Skip((index % 42) * 25).Take(25).ToList(); return Json(result, JsonRequestBehavior.AllowGet); } }
我们实现了GetLanguageRank()方法，它根据index值获取指定时间的数据，然后通过JSON数据格式返回给客户端。
现在，我们已经实现了饼状图（Dashboard_Pie）了，接下来，让我们运行Index.cshtml页面查看运行的效果吧！
图7 饼状图
我们注意到图1是一个动态图，它直观的展示了Stackoverflow热门标签的变化趋势，如果我们也要实现动态生成数据图该如何实现呢？
其实，问题转化为实时获取数据，然后生成数据图就OK了，如果要实现实时获取时间，我们想到的方法有：
1.Timer()
2.方法二数据库实时方法数据（SqlDependency）
3.Other（请大家分享好方法）