帮酷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视图的库。


public class Ticket



{



public string Id { get; set; }



public string MonthYear { get; set; }



public int ResolvedTickets { get; set; }



public int OpenTickets { get; set; }



public int TotalTickets { get; set; }



}



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


// Web API configuration and services



config.EnableCors();



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

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


[EnableCors(origins: "http://localhost:52306", headers: "*", methods: "*")]



public class FlotChartController : ApiController



{



public dynamic 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 axis



var monthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]



// generate the tool tip



function getTooltip(label, x, y) {



var date = new Date(x)



return label +" 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 format



flotService.getMonthlyTicketsSummary().then(function (results) {



// debugger;



var monthlyTicketsSummary = results.data;



var totalTickets = monthlyTicketsSummary[2].data;



var totalOverdueTickets = monthlyTicketsSummary[0].data;



var totalCompletedTickets = monthlyTicketsSummary[1].data;



var data6 = [];



var data7 = [];



var data8 = [];



// alert(new Date("2015-01-01").getTime())



for (j = 0; j < totalTickets.length; j++) {



var i = 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++) {



var i = 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++) {



var i = 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  |  如果智培  |  酷兔英语