帮酷LOGO
0 0 评论
文章标签:API  FLOT  angular  Web Api  CHAR  chart  WEB  


介绍

我正在为我的项目评估javascript图表框架。 我遇到了支持多种图形的jQuery Flot库。 在本文中,我尝试使用 jQuery Flot库对多时间轴图进行 plot。 它使用 ASP.NET Web API 从数据库中获取数据。 我面临的问题是以一种可以绑定到Flot图的格式获取数据。 我必须使用Json数据来播放大量的finally 数据,使它的能够使用 Flot。

使用代码

让我来解释这个场景。 要求显示票据数据每月收到的总票票总票数,总票数等于月份。 这个数据是在一个带有多个轴的图上的plot。 代码有三个部分:

1.数据库

2.WebAPI

3。Angular JS客户端应用程序,用于显示图形

Web API 和 Angular JS客户端应用程序是独立的Visual Studio 解决方案。 我已经理解了如何启用 CORS。

首先,我们将浏览数据库对象。 数据存储在表中,并在它的顶部创建视图以获取数据。

表脚本

CREATE TABLE [dbo].[Tickets1](
[TicketId] [int] NOT NULL, 
[CreationDate] [datetime] NOT NULL,
[TicketStatus] [smallint] NOT NULL,
[ResolvedDate] [datetime] NULL,
CONSTRAINT [PK_Tickets1] PRIMARY KEY CLUSTERED
( [TicketId] ASC)
WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, 
ALLOW_PAGE_LOCKS = ON)
ON [PRIMARY]
) ON [PRIMARY]
GO

视图脚本

CREATE VIEW [dbo].[MonthWiseTickets]
AS
SELECT newid() AS Id, MonthYear, 
[1] AS ResolvedTickets, [0] AS OpenTickets, [1] + [0] AS TotalTickets
FROM (SELECT CAST(YEAR(creationdate) AS VARCHAR(4)) + '-' + CONVERT(varchar(2), 
creationdate, 101) + '-'+'01' AS MonthYear, creationdate, TicketStatus
FROM Tickets1) up PIVOT (Count(CreationDate) FOR TicketStatus IN ([1], [0])) AS pvt

上面 视图以 below 格式提供输出

现在设置了数据库,接下来我们创建一个 Web API 来从数据库中获取数据。 所以我们就继续使用 Visual Studio 创建一个 Web API 项目。

Web API

项目的baisc结构将为 below。 首先我们将创建模型类,然后启用 CORS,然后创建控制器从数据库中获取数据。

我们创建模型 Tickets.cs inside 模型文件夹,它会 respresent SQL视图的库。

publicclass Ticket
{publicstring Id { get; set; }publicstring MonthYear { get; set; }publicint ResolvedTickets { get; set; }publicint OpenTickets { get; set; }publicint TotalTickets { get; set; }
}

然后我们需要 Enable才能让客户机调用 Web API。 为此,我们需要从NuGet安装CORS软件包。 完成 WebApiConfig.cs 并添加 below 代码行。

// Web API configuration and servicesconfig.EnableCors();

现在我们需要创建一个控制器来从数据库调用视图。 我们添加一个新的控制器文件 FlotChartController。 我们正在为控制器编写代码,注意我们正在为客户机应用程序启用CORS的第一行。

然后使用 ADO.NET 调用使用命令对象的SQL视图。

[EnableCors(origins: "http://localhost:52306", headers: "*", methods: "*")]publicclass FlotChartController : ApiController
{publicdynamic Get()
{
List<Ticket> Tickets = new List<Ticket>();
ConnectionStringSettings settings = ConfigurationManager.ConnectionStrings["charts"];using (SqlConnection con =new SqlConnection(settings.ConnectionString.ToString()))
{
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = "Select * From MonthWiseTickets order by CONVERT(datetime,monthyear)";
cmd.CommandTimeout = 120;
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader reader = cmd.ExecuteReader();while (reader.Read())
{
Ticket ticket = new Ticket();
ticket.Id = reader.GetGuid(0).ToString();
ticket.MonthYear = reader.GetString(1);
ticket.ResolvedTickets = reader.GetInt32(2);
ticket.OpenTickets = reader.GetInt32(3);
ticket.TotalTickets = reader.GetInt32(4);
Tickets.Add(ticket);
}
}var ret = new[] {new { label="Open Tickets", data = Tickets.Select(x=>new string[]{ x.MonthYear, x.OpenTickets.ToString() })},new { label="Resolved Tickets", data = Tickets.Select(x=>new string[]{ x.MonthYear, x.ResolvedTickets.ToString() })},new { label="Total Tickets", data = Tickets.Select(x=>new string[]{ x.MonthYear, x.TotalTickets.ToString() })},
};return ret;
}
}

现在服务器组件已经就绪,现在需要创建客户机应用程序来使用 Web API。 在下一节中,我们将了解如何设置AngularJS的客户端 applciation。

下面是设置客户端应用程序所需的库的步骤:

1.在 Visual Studio 中创建一个空的ASP.NET 项目

2.为 jQuery,AngularJS和Flot添加Nuget软件包

3。为 Angular Flot添加模块

这是你的soulution在添加这些库后的。

现在在项目中添加一个名为App的文件夹,并添加两个子文件夹控制器和服务。

现在我们开始添加一些代码,创建一个 app.js 文件并添加 below 代码。 这将在加载索引页时实例化我们的应用程序。

var app = angular.module('MorrisApp', ['ngRoute', 'angular-flot']);var serviceBase = 'http://localhost:51419/';
app.constant('ngAuthSettings', {
apiServiceBaseUri: serviceBase,
});

在"服务文件夹添加 flotService.js 文件"下,这将调用前面创建的Web API。

'use strict';
app.factory('flotService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {var serviceBase = ngAuthSettings.apiServiceBaseUri;var flotServiceFactory = {};var _getMonthlyTicketsSummary = function () {return $http.get(serviceBase + 'api/FlotChart').then(function (results) {return results;
});
};
flotServiceFactory.getMonthlyTicketsSummary = _getMonthlyTicketsSummary;return flotServiceFactory;
}]);

现在编写控制器来调用服务和 plot的主要部分。

app.controller('FlotCtrlJson', ['$scope', 'flotService', function ($scope, flotService) {//declare an array for month names to be dispaled on the x axisvarmonthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]// generate the tool tipfunction getTooltip(label, x, y) {vardate = new Date(x)returnlabel +" for" + monthNames[date.getMonth()] +""+date.getFullYear() +"are"+ y;}// set options for the flot graph$scope.options= {legend: {
container:"#legendjson",
show: true,
noColumns: 3,
},axisLabels: {
show: true
},xaxis: {
mode:"time", minTickSize: [1,"month"], timeformat:" %b %y",
axisLabel:"Month",
monthNames: monthNames,
//ticks: [[1,"Jan"],[2,"Feb"]]
},yaxes: [{
position:"left",
axisLabel:"Total Tickets",
axisLabelUseCanvas: true,
axisLabelColour:"rgb(2,198,137)"
},
{position:"right",
axisLabel:"Overdue Tickets",
axisLabelUseCanvas: true,
axisLabelColour:"#FF0000"
},
{position:"right",
axisLabel:"Resolved Tickets",
axisLabelUseCanvas: true,
axisLabelColour:"#0062FF"
},
],grid: {
hoverable: true//IMPORTANT! this is needed for tooltip to work
},tooltip: true,
tooltipOpts: {
content: getTooltip
}};//var data3 = [[1420050600000, 6], [1422729000000, 5]];// call the service to get the data in JSON formatflotService.getMonthlyTicketsSummary().then(function (results) {// debugger;varmonthlyTicketsSummary = results.data;vartotalTickets= monthlyTicketsSummary[2].data;vartotalOverdueTickets= monthlyTicketsSummary[0].data;vartotalCompletedTickets= monthlyTicketsSummary[1].data;vardata6= [];vardata7= [];vardata8= [];// alert(new Date("2015-01-01").getTime())for(j= 0; j<totalTickets.length; j++) {vari = totalTickets[j].toString();data5=i.split(",");data6=data6+"[" +new Date(data5[0]).getTime() +","+ data5[1] +"]" +","//data6[j] ="[5,10]"}data6=JSON.parse("[" +data6.substring(0, data6.length- 1) +"]");for(j= 0; j<totalOverdueTickets.length; j++) {vari = totalOverdueTickets[j].toString();data5=i.split(",");data7=data7+"[" +new Date(data5[0]).getTime() +","+ data5[1] +"]" +","//data6[j] ="[5,10]"}data7=JSON.parse("[" +data7.substring(0, data7.length- 1) +"]");for(j= 0; j<totalCompletedTickets.length; j++) {vari = totalCompletedTickets[j].toString();data5=i.split(",");data8=data8+"[" +new Date(data5[0]).getTime() +","+ data5[1] +"]" +","//data6[j] ="[5,10]"}data8=JSON.parse("[" +data8.substring(0, data8.length- 1) +"]");// set the data to be plotted on different y axes$scope.dataset=[{data: data6, label: 'Total Tickets', color:"rgb(2,198,137)", bars: {
show: true,
barWidth: 24 * 60 * 60 * 6000,
lineWidth: 1,
align:"center",
}},
{data: data7, label: ['Total Overdue Tickets'], yaxis: 2, color:"#FF0000", lines: {
show: true,
},points: { fillColor:"#FF0000", symbol:"triangle", show: true, }},
{data: data8, label: ['Total Resolved Tickets'], yaxis: 3, color:"#0062FF", lines: {
show: true,
},points: { fillColor:"#0062FF", symbol:"diamond", show: true, }},
];}, function (error) {
alert(error.data);});
}]);

现在,让我们运行我们的API项目,然后从 Visual Studio 运行 Angular 项目。

Points of Interest

我真的需要花时间来确定如何转换我在JSON中获得的日期,以及Flot库所理解的格式。



文章标签:WEB  API  angular  CHAR  chart  Web Api  FLOT  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语