使用 Web API、AngularJS 和 JQuery 绘制 MVC 图表
4.94/5 (16投票s)
引言
在本文中，我们将详细介绍如何使用 HTML5 Canvas、JQuery、WEB API 和 AngularJS 为 MVC Web 应用程序绘制自己的图表。
在本文中，我们将逐一详细介绍如何绘制
- MVC 动态柱状图
- MVC 动态饼图
- MVC 动态折线图
- MVC 动态折线&柱状图
- MVC 动态甜甜圈图
- MVC 动态气泡图
我们的图表特性
- 图表源数据：使用 WEB API 和 AngularJS，我们将从数据库加载图表数据到组合框。在我们的 JQuery 中，我们将从组合框绘制图表详细信息。
- 图表类别数量：图表项将动态从数据库加载。在这里，我们将绘制组合框中的所有项。最好每个图表绘制少于 12 个项。
- 图表标题文本：用户可以添加自己的图表标题，并在需要时动态更改标题。在这里，在我们的示例中，我们将在图表底部绘制标题文本框文本。（如果需要，用户可以根据自己的要求重新设计和自定义）。
- 图表水印文本：在某些情况下，我们需要将公司名称作为水印添加到我们的图表中。在这里，在我们的示例中，我们将在图表中心绘制水印文本框文本。（如果需要，用户可以根据自己的要求重新设计和自定义）。
- 图表公司 LOGO：用户可以为其图表添加自己的公司 Logo。（此处作为示例，我们在左上角添加了自己的图片作为 Logo。（如果需要，用户可以根据自己的要求重新设计和自定义）。
- 图表警报图像显示：如果选中“警报开”单选按钮，我们将显示警报图像。如果点击“警报关”单选按钮，则不会显示警报图像。在 JQuery 中，我们声明了 alertCheckValue = 90，然后我们将绘制数据与此 alertcheckValue 进行比较，如果绘制值大于此检查值，则我们在图例中显示警报图像。
警报图像有什么用？
让我们考虑一个实际的项目。例如，我们需要为一家制造工厂显示一个图表，其中包含生产结果为“良好”和“不良”。例如，如果每个质量值的生产结果高于 90，我们需要显示警报绿色图像；如果质量值低于 90，我们需要显示带有标签条的红色图像。
此警报图像易于识别每个质量结果的好坏。（此处作为示例，我们用于质量检查并显示绿色和红色图像，但用户可以根据自己的要求进行自定义，并添加自己的图像和逻辑）。
- 另存为图像：用户可以将图表保存为图像。
- 图表主题
这里我们为我们的图表创建了两种主题：蓝色和绿色。我们可以在此处看到两种主题的输出。用户也可以根据需要添加任意数量的主题。
蓝色主题
绿色主题
本文分为两部分
- 将图表项和值插入/更新到数据库，使用 WEB API、AngularJS 从数据库选择图表项和值到组合框
- 使用 JQuery 在我们的 MVC 页面上绘制自己的图表到 HTML5 Canvas 标签
必备组件
Visual Studio 2015：您可以从这里下载。
使用代码
在代码部分，我们可以看到 3 个步骤
步骤 1：解释如何创建示例数据库、表、存储过程以选择、插入和更新图表数据到 SQL Server。
步骤 2：解释如何创建 WEB API 以获取数据并使用 AngularJS 将结果绑定到 MVC 页面。
步骤 3：解释如何使用 JQuery 在我们的 MVC Web 应用程序中绘制自己的图表。
步骤 1：用于创建表和存储过程的脚本
我们将在数据库“ItemsDB”下创建一个 ItemMaster 表。以下是用于创建数据库、表和示例插入查询的脚本。在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2014。
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ItemsDB' )
DROP DATABASE ItemsDB
GO
CREATE DATABASE ItemsDB
GO
USE ItemsDB
GO
-- 1) //////////// Item Masters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemMaster' )
DROP TABLE ItemMaster
GO
CREATE TABLE [dbo].[ItemMaster](
[ItemID] INT IDENTITY PRIMARY KEY,
[ItemName] [varchar](100) NOT NULL,
[SaleCount] [varchar](10) NOT NULL
)
-- insert sample data to Item Master table
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES ('Item1','100')
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES ('Item2','82')
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES ('Item3','98')
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES ('Item4','34')
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES ('Item5','68')
select * from ItemMaster
-- 1)To Select Item Details
-- Author : Shanu
-- Create date : 2016-03-15
-- Description :To Select Item Details
-- Tables used : ItemMaster
-- Modifier : Shanu
-- Modify date : 2016-03-15
-- =============================================
-- To Select Item Details
-- EXEC USP_Item_Select ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_Item_Select]
(
@ItemName VARCHAR(100) = ''
)
AS
BEGIN
SELECT ItemName,
SaleCount
FROM ItemMaster
WHERE
ItemName like @ItemName +'%'
Order BY ItemName
END
GO
-- 2) To Insert/Update Item Details
-- Author : Shanu
-- Create date : 2016-03-15
-- Description :To Insert/Update Item Details
-- Tables used : ItemMaster
-- Modifier : Shanu
-- Modify date : 2016-03-15
-- =============================================
-- To Insert/Update Item Details
-- EXEC USP_Item_Edit ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_Item_Edit]
(
@ItemName VARCHAR(100) = '',
@SaleCount VARCHAR(10) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM ItemMaster WHERE ItemName=@ItemName)
BEGIN
INSERT INTO ItemMaster ([ItemName],[SaleCount])
VALUES (@ItemName,@SaleCount)
Select 'Inserted' as results
return;
END
ELSE
BEGIN
Update ItemMaster SET
SaleCount=@SaleCount
WHERE ItemName=@ItemName
Select 'Updated' as results
return;
END
Select 'Error' as results
END
-- 3)To Max and Min Value
-- Author : Shanu
-- Create date : 2016-03-15
-- Description :To Max and Min Value
-- Tables used : ItemMaster
-- Modifier : Shanu
-- Modify date : 2016-03-15
-- =============================================
-- To Max and Min Value
-- EXEC USP_ItemMaxMin_Select ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_ItemMaxMin_Select]
(
@ItemName VARCHAR(100) = ''
)
AS
BEGIN
SELECT MIN(convert(int,SaleCount)) as MinValue,
MAX(convert(int,SaleCount)) as MaxValue
FROM ItemMaster
WHERE
ItemName like @ItemName +'%'
END
GO
步骤 2：在 Visual Studio 2015 中创建您的 MVC Web 应用程序
安装 Visual Studio 2015 后，点击开始，然后点击程序，选择Visual Studio 2015 - 点击Visual Studio 2015。点击新建，然后点击项目，选择 Web，然后选择ASP.NET Web 应用程序。输入您的项目名称，然后点击确定。
选择 MVC、WEB API，然后点击确定。
现在我们已经创建了 MVC 应用程序，下一步我们将我们的 SQL Server 数据库添加为实体数据模型到我们的应用程序。
使用 ADO.NET 实体数据模型添加数据库
右键点击我们的项目，然后点击添加 -> 新建项。
选择数据 -> 选择 ADO.NET 实体数据模型 > 为我们的 EF 命名，然后点击添加。
选择从数据库设计的 EF，然后点击下一步。
在此点击新建连接，然后提供您的 SQL Server 服务器名称并连接到您的数据库。
这里可以看到我们已经提供了 SQL 服务器名称、ID 和密码，连接成功后，我们选择 ItemsDB 作为数据库，因为我们已经使用我的 SQL 脚本创建了数据库。
点击下一步，选择我们需要使用的表，然后点击完成。
这里可以看到我们选择了 ItemMasters 表和所有需要的存储过程，选择完毕后点击完成。
实体创建完成后，下一步是在我们的控制器中添加 WEB API，并编写用于选择/插入/更新和删除的函数。
添加 WEB API 控制器的步骤。
右键点击 Controllers 文件夹 -> 点击添加 -> 点击 Controller。
由于我们要创建 WEB API Controller，请选择 Controller 并添加 Empty WEB API 2 Controller。为您的 Web API Controller 命名，然后点击确定。在此，我的 Web API Controller 命名为“ItemAPIController”。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易用的方法。
Web API 有四种方法：Get/Post/Put 和 Delete，其中
Get用于请求数据。（查询）
Post用于创建数据。（插入）
Put 用于更新数据。
Delete 用于删除数据。
在我们的示例中，我们将同时使用Get和Post，因为我们需要从数据库获取所有图像名称和描述，并将新的图像名称和图像描述插入到数据库。
Get 方法
在我们的示例中，我只使用了 Get 方法，因为我只使用了存储过程。我们需要为我们的实体创建一个对象，并编写我们的 Get 方法来执行选择/插入/更新和删除操作。
查询操作
我们使用 get 方法通过实体对象获取 itemMaster 表的所有详细信息，并将结果作为 IEnumerable 返回。我们在 AngularJS 中使用此方法，并将结果绑定到组合框，并通过 Insert 方法将新的图表项插入到数据库。
public class ItemAPIController : ApiController
{
ItemsDBEntities objapi = new ItemsDBEntities();
// To get all Item chart detaiuls
[HttpGet]
public IEnumerable<USP_Item_Select_Result> getItemDetails(string ItemName)
{
if (ItemName == null)
ItemName = "";
return objapi.USP_Item_Select(ItemName).AsEnumerable();
}
// To get maximum and Minimum value
[HttpGet]
public IEnumerable<USP_ItemMaxMin_Select_Result> getItemMaxMinDetails(string ItemNM)
{
if (ItemNM == null)
ItemNM = "";
return objapi.USP_ItemMaxMin_Select(ItemNM).AsEnumerable();
}
// To Insert/Update Item Details
[HttpGet]
public IEnumerable<string> insertItem(string itemName, string SaleCount)
{
return objapi.USP_Item_Edit(itemName,SaleCount).AsEnumerable();
}
}
现在我们已经创建了 Web API Controller 类。下一步是创建我们的 AngularJs 模块和 Controller。让我们看看如何创建我们的 AngularJS Controller。在 Visual Studio 2015 中，添加 AngularJS Controller 非常简单。让我们一步一步地看看如何创建和编写我们的 AngularJS Controller。
创建 AngularJS 控制器
首先，在 Script 文件夹内创建一个文件夹，我们将文件夹命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键点击 MyAngular 文件夹，点击添加，然后点击新建项 > 选择 Web > 选择 AngularJs Controller 并为 Controller 命名。我们将我的 AngularJs Controller 命名为“Controller.js”。
如果 Angular JS 包丢失，请将包添加到您的项目中。
右键单击您的 MVC 项目，然后点击 -> 管理 NuGet 程序包。搜索 AngularJs 并点击安装。
Modules.js：在这里，我们将添加 AngularJS JavaScript 的引用，并创建一个名为“AngularJs_Module”的 Angular 模块。
// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("AngularJs_Module", ['ngAnimate']);
})();
Controllers：在 AngularJS Controller 中，我完成了所有业务逻辑，并将数据从 Web API 返回到我们的 MVC HTML 页面。
1. 变量声明
首先，我们声明了所有需要使用的本地变量。
app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
$scope.sItemName = "";
$scope.itemCount = 5;
$scope.selectedItem = "";
$scope.chartTitle = "SHANU Bar Chart";
$scope.waterMark = "SHANU";
$scope.ItemValues = 0;
$scope.ItemNames = "";
$scope.showItemAdd = false;
$scope.minsnew = 0;
$scope.maxnew =0;
2. 方法
Select 方法
在这里，我们从 WEB API 获取所有数据，并将结果绑定到我们的组合框，并使用另一个方法获取图表值的最大值和最小值，并将其绑定到隐藏字段。
// This method is to get all the Item Details to bind in Combobox for plotting in Graph
selectuerRoleDetails($scope.sItemName);
// This method is to get all the Item Details to bind in Combobox for plotting in Graph
function selectuerRoleDetails(ItemName) {
$http.get('/api/ItemAPI/getItemDetails/', { params: { ItemName: ItemName } }).success(function (data) {
$scope.itemData = data;
$scope.itemCount = $scope.itemData.length;
$scope.selectedItem = $scope.itemData[0].SaleCount;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
$http.get('/api/ItemAPI/getItemMaxMinDetails/', { params: { ItemNM: $scope.sItemName } }).success(function (data) {
$scope.itemDataMaxMin = data;
$scope.minsnew = $scope.itemDataMaxMin[0].MinValue;
$scope.maxnew = $scope.itemDataMaxMin[0].MaxValue;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
插入方法
用户可以通过点击“添加图表项详细信息”来插入或更新图表项值。在验证之后，我们将图表项名称和值传递给 WEB API 方法以插入到我们的数据库中。
$scope.saveDetails = function () {
$scope.IsFormSubmitted = true;
$scope.Message = "";
if ($scope.ItemNames == "")
{
alert("Enter Item Name");
return;
}
if ($scope.ItemValues == "") {
alert("Enter Item Value");
return;
}
if ($scope.IsFormValid) {
alert($scope.ItemNames);
$http.get('/api/ItemAPI/insertItem/', { params: { itemName: $scope.ItemNames, SaleCount: $scope.ItemValues } }).success(function (data) {
$scope.CharDataInserted = data;
alert($scope.CharDataInserted);
cleardetails();
selectuerRoleDetails($scope.sItemName);
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}
else {
$scope.Message = "All the fields are required.";
}
};
});
步骤 3：使用 JQuery 在我们的 MVC 页面 Canvas 标签上绘制图表
在这里，我们将详细介绍如何使用 JQuery 在我们的 MVC Web 应用程序上绘制柱状图。
在 JavaScript 中，声明全局变量并在 JavaScript 中初始化 Canvas。在代码中，我使用了注释，以便于理解声明。
脚本详细说明
脚本全局变量
图表类别颜色添加
将图表类别颜色添加到数组。这里我们固定了 12 种颜色和 12 个数据添加到柱状图中。如果您愿意，可以从这里添加更多。这里我们有 2 套颜色组合，一套以绿色为基础，一套以蓝色为基础。用户可以根据需要在此处添加。
var pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations
// var pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations
//This method will be used to check for user selected Color Theme and Change the color
function ChangeChartColor() {
if ($('#rdoColorGreen:checked').val() == "Green Theme") {
pirChartColor = ["#6CBB3C", "#F87217", "#EAC117", "#EDDA74", "#CD7F32", "#CCFB5D", "#FDD017", "#9DC209", "#E67451", "#728C00", "#617C58", "#64E986"]; // green Color Combinations
lineColor = "#3090C7"; // Blue Color for Line
lineOuterCircleColor = "#6CBB3C"; // Green Color for Outer Circle
}
else {
pirChartColor = ["#3090C7", "#BDEDFF", "#78C7C7", "#736AFF", "#7FFFD4", "#3EA99F", "#EBF4FA", "#F9B7FF", "#8BB381", "#BDEDFF", "#B048B5", "#4E387E"]; // Blue Color Combinations
lineColor = "#F87217"; // Orange Color for the Line
lineOuterCircleColor = "#F70D1A "; // Red Color for the outer circle
}
}
获取 X 绘制和 Y 绘制值的方法：这里我们计算以在 X 和 Y 轴上绘制我们的图表项。
// to return the x-Value
function getXPlotvalue(val) {
return (Math.round((chartWidth) / noOfPlots)) * val + (xSpace * 1.5) - 20;
}
// Return the y value
function getYPlotVale(val) {
return chartHeight - (((chartHeight - xSpace) / maxDataVal) * val);
}
绘制图例：如果选中“显示图例”单选按钮，则我们在 Canvas 标签内的图表中绘制一个图例，并且在此方法中我们还会检查是否显示警报图像。
// This function is used to draw the Legend
function drawLengends() {
ctx.fillStyle = "#7F462C";
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
//Drawing Inner White color Rectange with in Above brown rectangle to plot all the Lables with color,Text and Value.
ctx.fillStyle = "#FFFFFF";
rectInner.startX = rect.startX + 1;
rectInner.startY = rect.startY + 1;
rectInner.w = rect.w - 2;
rectInner.h = rect.h - 2;
ctx.fillRect(rectInner.startX, rectInner.startY, rectInner.w, rectInner.h);
labelBarX = rectInner.startX + 4;
labelBarY = rectInner.startY + 4;
labelBarWidth = rectInner.w - 10;
labelBarHeight = (rectInner.h / noOfPlots) - 5;
colorval = 0;
// here to draw all the rectangle for Lables with Image display
$('#DropDownList1 option').each(function () {
ctx.fillStyle = pirChartColor[colorval];
ctx.fillRect(labelBarX, labelBarY, labelBarWidth, labelBarHeight);
// Here we check for the rdoAlert Status is On - If the Alert is on then we display the Alert Image as per the Alert check value.
if ($('#rdoAlaramOn:checked').val() == "Alert On") {
// Here we can see fo ever chart value we check with the condition .we have initially declare the alertCheckValue as 300.
//so if the Chart Plot value is Greater then or equal to the check value then we display the Green Image else we display the Red Image.
//user can change this to your requiremnt if needed.This is optioan function for the Pie Chart.
if (parseInt($(this).val()) >= alertCheckValue) {
ctx.drawImage(greenImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);
}
else {
ctx.drawImage(redImage, labelBarX, labelBarY + (labelBarHeight / 3) - 4, imagesize, imagesize);
}
}
//Draw the Pie Chart Label text and Value
ctx.fillStyle = "#000000";
ctx.font = '10pt Calibri';
ctx.fillText($(this).text(), labelBarX + imagesize + 2, labelBarY + (labelBarHeight / 2));
// To Increment and draw the next bar ,label Text and Alart Image.
labelBarY = labelBarY + labelBarHeight + 4;
// labelTextYXVal = labelBarY + labelBarHeight - 4;
colorval = colorval + 1;
});
}
绘制图表：这是我们的主函数。在这里，我们获取绘制柱状图的所有详细信息。在此函数中，我们将绘制图表标题、图表水印文本、图表 Logo 图像，最后调用 Draw Bar Chart 方法在 Canvas 标签内绘制我们的柱状图。
// This is the main function to darw the Charts
function drawChart() {
ChangeChartColor();
// asign the images path for both Alert images
greenImage.src = '../images/Green.png';
redImage.src = '../images/Red.png';
LogoImage.src = '../images/shanu.jpg';
// Get the minumum and maximum value.here i have used the hidden filed from code behind wich will stored the Maximum and Minimum value of the Drop down list box.
minDataVal = $('input:text[name=hidListMin]').val();
maxDataVal = $('input:text[name=hidListMax]').val();
// Total no of plots we are going to draw.
noOfPlots = $("#DropDownList1 option").length;
maxValdivValue = Math.round((maxDataVal / noOfPlots));
//storing the Canvas Context to local variable ctx.This variable will be used to draw the Pie Chart
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//globalAlpha - > is used to display the 100% opoacity of chart .because at the bottom of the code I have used the opacity to 0.1 to display the water mark text with fade effect.
ctx.globalAlpha = 1;
ctx.fillStyle = "#000000";
ctx.strokeStyle = '#000000';
//Every time we clear the canvas and draw the chart
ctx.clearRect(0, 0, canvas.width, canvas.height);
//If need to draw with out legend for the Line Chart
chartWidth = canvas.width - xSpace;
chartHeight = canvas.height - ySpace;
// step 1) Draw legend $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$########################
if ($('#chkLegend:checked').val() == "Show Legend") {
chartWidth = canvas.width - ((canvas.width / 3) - (xSpace / 2));
chartHeight = canvas.height - ySpace - 10;
legendWidth = canvas.width - ((canvas.width / 3) - xSpace);
legendHeight = ySpace;
rect.startX = legendWidth;
rect.startY = legendHeight;
rect.w = canvas.width / 3 - xSpace - 10;
rect.h = canvas.height - ySpace - 10;
//In this method i will draw the legend with the Alert Image.
drawLengends();
}
// end step 1) $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
var chartMidPosition = chartWidth / 2 - 60;
//// //If need to draw with legend
//// chartWidth = canvas.width - ((canvas.width / 3) - (xSpace / 2));
//// chartHeight = canvas.height - ySpace - 10;
// Step 2 ) +++++++++++++ To Add Chart Titel and Company Logo
//To Add Logo to Chart
var logoXVal = canvas.width - LogoImgWidth - 10;
var logolYVal = 0;
//here we draw the Logo for teh chart and i have used the alpha to fade and display the Logo.
ctx.globalAlpha = 0.6;
ctx.drawImage(LogoImage, logoXVal, logolYVal, LogoImgWidth, LogoImgHeight);
ctx.globalAlpha = 1;
ctx.font = '22pt Calibri';
ctx.fillStyle = "#15317E";
var titletxt = $('input:text[name=txtTitle]').val();
ctx.fillText(titletxt, chartMidPosition, chartHeight + 60);
ctx.fillStyle = "#000000";
ctx.font = '10pt Calibri';
// end step 2) +++++++++++ End of Title and Company Logo Add
// Step 3 ) +++++++++++++ toDraw the X-Axis and Y-Axis
// >>>>>>>>> Draw Y-Axis and X-Axis Line(Horizontal Line)
// Draw the axises
ctx.beginPath();
ctx.moveTo(xSpace, ySpace);
// first Draw Y Axis
ctx.lineTo(xSpace, chartHeight);
// Next draw the X-Axis
ctx.lineTo(chartWidth, chartHeight);
ctx.stroke();
// >>>>>>>>>>>>> End of X-Axis Line Draw
//end step 3) +++++++++++++++++++++++
// Step 4) <<<<<<<<<<<<<<<<<<<<<<< To Draw X - Axis Plot Values <<<<<<<<<<<<< }}}}}}
// Draw the X value texts
// --->>>>>>>>>>>> for the Bar Chart i have draw the X-Axis plot in with drawBarChart
// <<<<<<<<<<<<<<<<<<<<<<< End of X Axis Draw
// end Step 4) <<<<<<<<<<<<<<<<<<<<<<<
// Step 5){{{{{{{{{{{{
// {{{{{{{{{{{{{To Draw the Y Axis Plot Values}}}}}}}}}}}}}}
var vAxisPoints = 0;
var max = maxDataVal;
max += 10 - max % 10;
for (var i = 0; i <= maxDataVal; i += maxValdivValue) {
ctx.fillStyle = fotnColor;
ctx.font = axisfontSize + 'pt Calibri';
ctx.fillText(i, xSpace - 40, getYPlotVale(i));
//Here we draw the Y-Axis point line
ctx.beginPath();
ctx.moveTo(xSpace, getYPlotVale(i));
ctx.lineTo(xSpace - 10, getYPlotVale(i));
ctx.stroke();
vAxisPoints = vAxisPoints + maxValdivValue;
}
//}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
//Step 5) *********************************************************
//Function to Draw our Chart here we can Call/Bar Chart/Line Chart or Pie Chart
drawBarChart();
// end step 6) **************
//Step 7) :::::::::::::::::::: to add the Water mark Text
var waterMarktxt = $('input:text[name=txtWatermark]').val();
// Here add the Water mark text at center of the chart
ctx.globalAlpha = 0.1;
ctx.font = '86pt Calibri';
ctx.fillStyle = "#000000";
ctx.fillText(waterMarktxt, chartMidPosition - 40, chartHeight / 2);
ctx.font = '10pt Calibri';
ctx.globalAlpha = 1;
/// end step 7) ::::::::::::::::::::::::::::::::::::::
}
绘制柱状图：在此函数中，我们循环遍历组合框项，获取所有项名称和值，然后逐一绘制柱状图并在我们的 Canvas 标签上绘制值。
function drawBarChart() {
var XvalPosition = xSpace;
widthcalculation = parseInt(((parseInt(chartWidth) - 100) / noOfPlots));
colorval = 0;
var countval = 0;
$('#DropDownList1').val($('#DropDownList1 option').eq(0).val());
$('#DropDownList1 option').each(function (i) {
// alert($(this).text() + " : " + $(this).val());
// Draw Xaxis Plots Line and Text ***********
XvalPosition = XvalPosition + widthcalculation;
ctx.moveTo(XvalPosition, chartHeight);
ctx.lineTo(XvalPosition, chartHeight + 15);
ctx.stroke();
ctx.fillStyle = "#000000";
ctx.font = '10pt Calibri';
ctx.fillText($(this).text(), XvalPosition - 28, chartHeight + 24);
// End Xval Plotting ************
//Draw Bar Graph **************==================********************
var barRatio = parseInt($(this).val()) / maxDataVal;
//alert(ratio)
var barfillHeight = parseInt(barRatio * (parseInt(chartHeight - xSpace)));
// alert(barHeight)
ctx.fillRect(XvalPosition - widthcalculation - 1, chartHeight - 1, widthcalculation + 2, -barfillHeight);
ctx.fillStyle = pirChartColor[colorval];
// e.DrawRectangle(B1pen, XvalPosition_Start, Ystartval, XvalPosition_new, YEndval);
ctx.fillRect(XvalPosition - widthcalculation, chartHeight, widthcalculation, -barfillHeight);
//ctx.fillRect(XvalPosition - widthcalculation, yLineHeight, widthcalculation, yLineHeight- parseInt($(this).val()));
// *****
ctx.fillStyle = "#000000";
ctx.font = '10pt Calibri';
ctx.fillText($(this).val(), XvalPosition - widthcalculation + 4, chartHeight - barfillHeight - 8);
ctx.fillStyle = pirChartColor[colorval];
//END Draw Bar Graph **************==================********************
colorval = colorval + 1;
});
}
我们为每个图表创建了单独的视图，与上面的代码类似，我们在每个视图页面上绘制了所有图表类型。在主页和所有页面上，您都可以找到顶部菜单，其中包含指向每个图表页面的链接，从柱状图到气泡图。
关注点
在您的 SQL Server 中运行 SQL 脚本以创建 DB、表和存储过程。在 web.config 中，将连接字符串更改为您的本地 SQL Server 连接。在附加的 zip 文件中，您可以找到所有柱状图、折线图、饼图、柱线图、甜甜圈图和气泡图的代码。
测试过的浏览器
- Chrome
- Firefox
- IE10
历史
shanuMVCAngularJSBubbleChart.zip - 2016/05/20