توضیحات و دانلود

ایجاد نمودارهای نواری ​​از پایگاه داده با استفاده از نمودارهای کمک کننده در ASP.Net MVC
0 0
ایجاد نمودارهای نواری ​​از پایگاه داده با استفاده از نمودارهای کمک کننده در ASP.Net MVC

با سلام در این مقاله با مثال توضیح خواهیم داد که چگونه نمودارهای نواری را از پایگاه داده با استفاده از کلاس Helper Charts در ASP.Net MVC Razor ایجاد کنیم.
بانک اطلاعاتی
در اینجا از پایگاه Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید.
پایگاه داده Northwind را دانلود و نصب کنید
Model
کلاس Model زیر شامل دو ویژگی است یعنی ShipCity و TotalOrders.

public class OrderModel
{
    public string ShipCity { get; set; }
    public int TotalOrders { get; set; }
}

فضاهای نام
شما باید فضای نامهای زیر را وارد کنید.

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Controller
Controller شامل روش Action Index می باشد. در داخل این روش ، داده های آماری برای نمودار نواری از جدول سفارشات گرفته شده است و در لیست کلی لیست اشیاء کلاس OrderModel قرار دارد.
در نهایت لیست کلی کلاس OrderModel به View بازمیگردد.

public ActionResult Index()
{
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
    string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
    List<OrderModel> chartData = new List<OrderModel>();
 
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new OrderModel
                    {
                        ShipCity = sdr["ShipCity"].ToString(),
                        TotalOrders = Convert.ToInt32(sdr["TotalOrders"])
                    });
                }
            }
 
            con.Close();
        }
    }
 
    return View(chartData);
}

View
در داخل View ، در خط اول، فهرست عمومی کلاس OrderModel به عنوان Model برای View نمایش داده می شود.
نمودار نواری با استفاده از روش Chart که پارامترهای زیر را می پذیرد ایجاد می شود.
Width - عرض نمودار.
Height - ارتفاع نمودار.
Theme(اختیاری) - اجازه می دهد تا تم نمودار را از تم های از پیش تعریف شده تنظیم کنید.
روش های زیر نیز استفاده می شود :
AddTitle - نام عنوان را برای نمودار تنظیم می کند.
AddSeries - این روش نوع چارت را یعنی Bar، Pie و غیره را تنظیم می کند و همچنین مقادیر X و Y برای نمودار را تنظیم می کند.
Write - روش نوشتن برای رندر نمودار در صفحه استفاده می شود.

@model List<Charts_MVC.Models.OrderModel>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @{
        var chart = new Chart(width: 500, height: 500, theme: ChartTheme.Yellow)
       .AddTitle("USA City Distribution")
       .AddSeries("Default", chartType: "Bar",
            xValue: Model, xField: "ShipCity",
            yValues: Model, yFields: "TotalOrders")
        .Write();
    }
</body>
</html>

عکس روی صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :