نمودار Pie با استفاده از ASP.NET MVC

نمودار, Pie ، در این مقاله می خواهیم با استفاده, از کتابخانه های جاوا اسکریپت یک نمودار, pie که برای نمایش جمعیت و … از آن استفاده, می کند را با استفاده, از Entity framework در asp.net mvc نمایش دهیم برای توضیحات بیشتر لطفا مقاله ی زیر را مطالعه کنید

شما برای اینکه بتوانید این مثال را ببینید باید از نرم افزار های زیر استفاده, کنید:

• visual studio
• Sql server
• دانش مقدماتی از Asp.net Mvc
• دانش مقدماتی از Entity Framework
• دانش پایه از Jquery
• و کمی در مورد css

در کل در این مقاله ما موضوعات زیر را بررسی می کنیم:

• در ابتدا یک پروژه Asp.net Mvc بسازید
• تنظیم برنامه با Entity framework اتصال به پایگاه داده
• ساخت یک Controller و یک view
• داخل Nuget باید کتابخانه ی C3 را نصب نمایید.
• ایجاد نمودار,
• سفارشی کردن نمودار,

یک جدول در پایگاه داده (دیتابیس) ، با لیستی از مقادیر جمعیت کشور ایجاد کنید.
این جدول در واقع لیستی از شهرها را در دیتابیس نمایش می دهد به صورت زیر:

نمودار Pie

می توانید کوئری زیر را هم برای ساخت جدول خودتان بنویسید و اجرا کنید

CREATE TABLE [dbo].[Country](  
[CountryID] [bigint] IDENTITY(1,1) NOT NULL,  
[CountryName] [nvarchar](250) NULL,  
[CountryPopulation] [float] NULL,  
CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED  
(  
   [CountryID] 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  

داخل دیتابیس چند تا کشور را به صورت نمونه وارد کنید

نمودار Pie

می توانید با استفاده, از کوئری داخل دیتابیس اطلاعات داخل جدول تان را پر نمایید

CREATE TABLE [dbo].[Country](  
[CountryID] [bigint] IDENTITY(1,1) NOT NULL,  
[CountryName] [nvarchar](250) NULL,  
[CountryPopulation] [float] NULL,  
CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED  
(  
   [CountryID] 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  

یک پروژه جدید از نوع Asp.net mvc5 ایجاد کنید.

برای درست کردن پروژه ی جدید باید مراحل زیر را به ترتیب پیش ببرید.

در ابتدا بر روی New Project کلیک نمایید بعد از آن پروژه از نوع web انتخاب کنید نام پروژه و محل ذخیره ی پروژه خود را مشخص کنید یک فرم خالی از نوع Mvc انتخاب کنید و در آخر باید به صورت زیر باشد پروژه ی خالی ایجاد شده :

نمودار Pie

حال زمان آن رسیده است که دیتابیس خود را به پروژه خود اضافه نمایید شما داخل دیتابیس خود یک پایگاه داده و جدول ایجاد کردید برای این کار روی Model کلیک کنید و یک دیتا ایجاد کنید که به دیتابیس شما وصل شود زمانی که وصل شد جدول و دیتابیس شما به صورت زیر نمایش داده می شود

نمودار Pie

بعد از افزودن پایگاه داده باید یک Controller و view ایجاد نمایید.
بعد از کلیک راست کردن روی پوشه ی controller یک controller خالی ایجاد کنید و با کلیک راست کردن روی متد Index یک view خالی هم برای نمایش ایجاد نمایید
نمودار C3 را از Nuget نصب کنید و آن را در برنامه فعال کنید تصویر زیر به شما نشان می دهد که باید کجا پکیج را اضافه نمایید

نمودار Pie

از داخل browse باید C3 را انتخاب و نصب نمایید.

نمودار Pie

بعد از نصب کردن این پکیج فایل های css و js آن در داخل پروژه شما وجود دارد که می توانید آن را ببینید.

نمودار Pie

حال باید css ها و js ها را به صفحه ی اصلی آدرس دهی کنیم که بتواند این کتابخانه را بشناسد.

مانند تصویر زیر:

<link href="~/Content/c3.css" rel="stylesheet" />  
<link href="~/Content/Site.css" rel="stylesheet" />  
<link href="~/Content/bootstrap.css" rel="stylesheet" />  
<script src="~/Scripts/c3.min.js"></script>  
<script src="~/Scripts/d3.min.js"></script>  
<script src="~/Scripts/jquery-1.10.2.min.js"></script>  

داخل controller باید در ابتدا دیتابیس خودتان را تعریف کنید که بتوانید با استفاده, از Json آز آن جدول استفاده نمایید.

مانند تصویر زیر:

using Piechart.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace Piechart.Controllers {  
    public class ChartController: Controller {  
        // GET: Chart  
        public ActionResult Index() {  
            return View();  
        }  
        public ActionResult PieChart() {  
            CSharpCornerEntities entities = new CSharpCornerEntities();  
            return Json(entities.Countries.ToList(), JsonRequestBehavior.AllowGet);  
        }  
    }  
}  

بعد از آن با کلیک راست کردن روی controller می توانید یک view خالی ایجاد نمایید.

<div id="pieChart"></div>   

خط زیر مربوط به script نمودار است که باید به صورت زیر نوشته شود این اسکریپت دیتا ها را از دیتابیس می گیرد و داخل نمودار داده ها دوباره برگردانده می شود.

• Var data :برای نگه داشتن پارامترهای با فرمت json است
• var countryNames = []; : برای نگه داشتن اسم های کشورها است
• (function (e) jsondata.forEach : متد foreach و Looping
• countryNames.push(e.CountryName);: ارسال هر اسم از کشور به شماره ی آرایه ی خودش
• data[e.CountryName] = e.CountryPopulation;: افزودن جمعیت به کشور
• c3.generate({ : برای تولید نمودار از این متد استفاده می شود
• bindto: ‘#pieChart’,: تغییر controller به نمودار پایه و یا تمام ویژگی های این نمودار پایه به این کنترل متصل می شود
• json: [data],: انتقال تمام داده ها به صورت آرایه
• keys : { value: countryNames,:مقدار را با استفاده از این متد دریافت می کنیم
• type: ‘pie’: نوع نمودار را مشخص می کند.
• color: {pattern:: رنگ ترکیبی به نمودار اعمال می شود

<script type="text/javascript">  
    $(document).ready(function() {  
        $.ajax({  
            type: "GET",  
            url: "/Chart/PieChart",  
            data: {},  
            contentType: "application/json; charset=utf-8",  
            dataType: "json",  
            success: function(response) {  
                successFunc(response);  
            },  
        });  
  
        function successFunc(jsondata) {  
            var data = {};  
            var countryNames = [];  
            jsondata.forEach(function(e) {  
                countryNames.push(e.CountryName);  
                data[e.CountryName] = e.CountryPopulation;  
            })  
            var chart = c3.generate({  
                bindto: '#pieChart',  
                data: {  
                    json: [data],  
                    keys: {  
                        value: countryNames,  
                    },  
                    type: 'pie'  
                },  
                color: {  
                    pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']  
                },  
            });  
        }  
    });  
</script>  

زمانی که برنامه اجرا می شود به صورت زیر خواهد بود:

نمودار Pie

ما در نمونه ی بالا به صورت درصدی مقادیر را نمایش می دهیم حال اگر بخواهید این نمودار را سفارشی کنید می توانید به صورت عددی هم نمایش دهید که به صورت زیر خواهد بود:

pie: {  
    label: {  
        format: function(value, ratio, id) {  
            return value;  
        }  
    }  
}  

و زمانی که اجرا بگیرید :

نمودار Pie

کد کامل نمودار Pie در layout به صورت زیر است:

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>@ViewBag.Title - C3 Charts</title>  
    <link href="~/Content/c3.css" rel="stylesheet" />  
    <link href="~/Content/Site.css" rel="stylesheet" />  
    <link href="~/Content/bootstrap.css" rel="stylesheet" />  
    <script src="~/Scripts/c3.min.js"></script>  
    <script src="~/Scripts/d3.min.js"></script>  
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
</head>  
  
<body>  
    <div class="navbar navbar-inverse navbar-fixed-top">  
        <div class="container">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                </button> @Html.ActionLink("C3 Charts", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div>  
            <div class="navbar-collapse collapse">  
                <ul class="nav navbar-nav">  
                </ul>  
            </div>  
        </div>  
    </div>  
    <div class="container body-content"> @RenderBody()  
        <hr />  
        <footer>  
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
        </footer>  
    </div>  
</body>  
  
</html>  

کد کامل در view:

@ {  
    ViewBag.Title = "Index";  
} < h2 style = "position:center" > Pie Chart < /h2> < div id = "pieChart" > < /div> < script type = "text/javascript" > $(document).ready(function() {  
    $.ajax({  
        type: "GET",  
        url: "/Chart/PieChart",  
        data: {},  
        contentType: "application/json; charset=utf-8",  
        dataType: "json",  
        success: function(response) {  
            successFunc(response);  
        },  
    });  
  
    function successFunc(jsondata) {  
        var data = {};  
        var countryNames = [];  
        jsondata.forEach(function(e) {  
            countryNames.push(e.CountryName);  
            data[e.CountryName] = e.CountryPopulation;  
        })  
        var chart = c3.generate({  
            bindto: '#pieChart',  
            data: {  
                json: [data],  
                keys: {  
                    value: countryNames,  
                },  
                type: 'pie'  
            },  
            color: {  
                pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']  
            },  
            pie: {  
                label: {  
                    format: function(value, ratio, id) {  
                        return value;  
                    }  
                }  
            }  
        });  
    }  
}); < /script>  

کد کامل در controller:

using Piechart.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace Piechart.Controllers {  
    public class ChartController: Controller {  
        // GET: Chart  
        public ActionResult Index() {  
            return View();  
        }  
        public ActionResult PieChart() {  
            CSharpCornerEntities entities = new CSharpCornerEntities();  
            return Json(entities.Countries.ToList(), JsonRequestBehavior.AllowGet);  
        }  
    }  
}  

در کلاس Route هم باید به صورت زیر باشد:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using System.Web.Routing;  
namespace Piechart {  
    public class RouteConfig {  
        public static void RegisterRoutes(RouteCollection routes) {  
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {  
                controller = "Chart", action = "Index", id = UrlParameter.Optional  
            });  
        }  
    }  
}  

---