"> آموزش رسم نمودار توسط Angularjs با استفاده از فریمورک Web API

آموزش رسم نمودار توسط Angularjs با استفاده از Web API

نمودار توسط Angularjs

نمودار توسط Angularjs آموزشی که با آن با شما هستم.در دنیای برنامه نویسی و توسعه ممکن است مشتری تقاضای ایجاد نمودارهای هفتگی، سه ماهه و یا سالانه بکند؛ همیشه با خود فکر می کنید چگونه می توانم با استفاده از AngularJS، نمودارها را ایجاد کنم. خبر خوبی برایتان دارم در این مقاله به آموزش دو موضوع مهم می پردازیم:

نحوه ایجاد نمودارها در AngularJS با استفاده از فریم ورک WebAPI و موضوع دوم، Higcharts.js

در این مثال، تقاضای فرضی مشتریمان، ایجاد یک لیست از اسامی دانشجویان است.
اگر کاربر هر دانش آموزی را انتخاب کند، تمامی نمرات آن دانش آموز در قالب نمودار نمایش داده خواهد شد.

رفرنس جهت استفاده از Highcharts

<script src="https://code.highcharts.com/highcharts.js"></script>

 

حالا سوالی پیش می آید که Highcharts چیست؟
HighCharts یک کتابخانه برای ایجاد نمودارهاست که بر مبنای جاوااسکریپت نوشته شده است. با استفاده از این کتابخانه، به راحتی می توان نمودارهای تعاملی مطابق با خواسته هایتان ایجاد کنید. برای استفاده از این کتابخانه از اسکریپت زیر استفاده می کنیم:

ویژگی های HighChart
در قسمت قبل اشاره شد که HighChart مبتی بر جاوا اسکریپت است پس این کتابخانه از ویژگی ها در فرمت استفاده می کند، بنابراین در ادامه به توضیح برخی از این ویژگی ها می پردازیم:
۱- title: برای نمایش عنوان در قسمت هدر استفاده می شود.
۲- Subtitle: برای نمایش زیرنویس در قسمت هدر استفاده می شود.
۳- xAxis: در این جا می توانید در قالب یک آرایه تعریف کنید.
۴-yAxis: محور yها را تعریف می کند.
۵-legend: برای تنظیم هم ترازی و طرح بندی نمودارها استفاده می شود.
۶- chart: در این قسمت می توان نوع نمودار را تعریف کرد برای مثال نمودار مستطیلی، خطی و غیره
۷- Series: مهم ترین ویژگی است که مبه وسیله آن می توان داده در قالب آرایه تعریف کرد.
۸- Highcharts.chart: برای نمایش نمودارها استفاده می شود. در این جا باید برای div یک id تعریف کنیم (container ) زیرا برای فراخوانی این ویژگی، ابتدا باید آن را ایجاد کرد برای مثال از(Highcharts.chart(‘container’ استفاده می کنیم.



Highcharts.chart('container', { title: { text: 'Monthly Examination Summary', x: -20 //center }, 
subtitle: { text: 'Source: ST. Thomas School', x: -20 },
 xAxis: { categories: ['Hindi', 'Maths', 'English', 'Science'] }, 
yAxis: { title: { text: 'Marks' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, 
legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, 
series: [{ name: $scope.studentMarks[0].Name, data: [$scope.studentMarks[0].Hindi, $scope.studentMarks[0].Maths,
 $scope.studentMarks[0].English, $scope.studentMarks[0].Science] }] });  

و حالا نوبت به قسمت اصلی کار می رسد، که با بررسی کدها، نحوه استفاده از Highcharts را بهتر یاد بگیریم:
ابتدا Visual Studio را باز می کنیم سپس به تب File می رویم و گزینه New را انتخاب کرده و درنهایت گزینه Project را انتخاب می کنیم.

نمودار توسط Angularjs

نمودار توسط Angularjs

در پنجره بالا باید گزینه ASP.NET Web Application را انتخاب کنیم.

در قدم بعدی، WebAPI را انتخاب می کنیم:

نمودار توسط Angularjs

سپس روی OK کلیک می کنیم. حالا قسمت Solution Explorer را بررسی می کنیم:

نمودار توسط Angularjs

در این مقاله یک جدول به نام StudentMarksMaster داریم که نمرات دانش آموزان در آن ذخیره می شود.

نمودار توسط Angularjs

نمودار توسط Angularjs

حالا در صفحه جدید و برای ارتباط با جداول گزینه ADO.NET Entity Data Model را انتخاب می کنیم.

نمودار توسط Angularjs

روی دکمه Add کلیک می کنیم و یک فایل EDMX ایجاد می کنیم. وقتی دکمه finish را بزنیم صفحه ای مانند تصویر زیر نمایش داده خواهد شد.

نمودار توسط Angularjs

حالا نوبت به بررسی دقیق تر کدها می رسد. در ابتدا، می خواهیم اسامی دانش آموزان در یک drop-down list نمایش داده شود. برای این کار کلاس StudentModel را ایجاد می کنیم.

StudentModel.cs

public class StudentModel {  
    public int StudentId {  
        get;  
        set;  
    }  
    public String StudentName {  
        get;  
        set;  
    }  
}  

درکدهای بالا برای اینکه می خواهیم در لیستمان داده وارد کنیم از متغیر استفاده می کنیم StudentId برای مقادیر و StudentName برای تکست.

در قسمت بعد کلاس StudentController را ایجاد می کنیم تا از طریق آن بتوانیم داده ها را وارد لیست بکنیم.

StudentController.cs

using AngularwithWebAPI.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
namespace AngularwithWebAPI.Controllers {  
    public class StudentController: ApiController {  
        DbContext.StudentEntities studentEntities = new DbContext.StudentEntities();  
        public IHttpActionResult GetStudents() {  
            var query = studentEntities.StudentMarksMasters.Select(x =&gt; new StudentModel {  
                StudentId = x.Id, StudentName = x.Name  
            }).ToList();  
            return Ok(query);  
        }  
  
        public IHttpActionResult GetStudentMarks(int studentId) {  
            var query = studentEntities.StudentMarksMasters.Where(x =&gt; x.Id == studentId).ToList();  
            return Ok(query);  
        }  
    }  
}  

Script.js

angular.module('myModule', [])  
.controller('myController', function ($scope, $http) {  
$http.get('http://localhost:50623/api/student/getstudents').then(function(response) {    
    $scope.students = response.data;    
    $scope.studentId = $scope.students[0].StudentId;    
    $scope.studentChange($scope.students[0].StudentId);    
});    
    
$scope.studentChange = function(studentId) {    
$http.get('http://localhost:50623/api/student/getstudentmarks', {    
    params: {    
        studentId: studentId    
    }    
}).then(function(response) {    
    $scope.studentMarks = response.data;    
    
    Highcharts.chart('container', {    
        chart: {    
            type: 'line'    
        },    
        title: {    
            text: 'Monthly Examination Summary',    
            x: -20 //center    
        },    
        subtitle: {    
            text: 'Source: ST. Thomas School',    
            x: -20    
        },    
        xAxis: {    
            categories: ['Hindi', 'Maths', 'English', 'Science']    
        },    
        yAxis: {    
            title: {    
                text: 'Marks'    
            },    
    
        },    
    
        legend: {    
            layout: 'vertical',    
            align: 'right',    
            verticalAlign: 'middle',    
            borderWidth: 0    
        },    
        series: [{    
            name: $scope.studentMarks[0].Name,    
            data: [$scope.studentMarks[0].Hindi, $scope.studentMarks[0].Maths, $scope.studentMarks[0].English, $scope.studentMarks[0].Science]    
        }]    
    });    
});    
}    
});    

وحالا نوبت به اجرای کدها می رسد:

نمودار توسط Angularjs

درکدهای بالا، ابتدا کلاس studentcontroller.cs را ایجاد کردیم و سپس دوتابع جدید تعریف کردیم:
۱- تابع GetStudents() برای گرفتن دانش آموزان از لیستمان
۲- نمرات دانش آموزان به هنگام تغییر dropdownlist ، توسط تابع( GetStudentMarks(int studentId گرفته می شود.

در script.js این دوتا تابع بعد از فراخوانی highcharts.charts ، صدا زده می شوند و اطلاعات مربوط به div. chart در $scope.studentMarks ذخیره می شوند. باید در داخل ویژگی های مجموعه داده ها فراخوانی بشوند و نکته دیگری که وجود دارد از
{chart:{type:line استفاده می کنیم. خروجی مطالب بالا، به صورت یک نمودار خطی قابل مشاهده است. اگر می خواهید یک نمودار دیگر را در خروجی مشاهده کنید کافی است column را وارد کرده و خروجی مانند شکل زیر خواهد بود.

نمودار توسط Angularjs

نمودارها ایجاد شدند و آموزش ما هم تمام شد امیدوارم از یادگیری این آموزش لذت برده باشید مثل همیشه در قسمت نظرات منتظر نظرات ارزشمند شما هستیم. برنامه نویسی خوش بگذره.

سورس کد پروژه نیز ضمیمه شده است امیدوارم استفاده کنید.در ضمن اسکریپت ساخت دیتابیس نیز ضمیمه شده است سعی کنید آن را در سیستم خود در SQL خود ایجاد کنید.

نمودار توسط Angularjs

محمد دهقانی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم