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

پیاده سازی نمودار HTML5 Canvas در ASP.Net MVC Razor
0 0
پیاده سازی نمودار HTML5 Canvas در ASP.Net MVC Razor

در این مقاله، با مثالهایی توضیح خواهم داد که چگونه نمودارهای Canvas متحرک HTML5 را از پایگاه داده با استفاده از jQuery AJAX در ASP.Net MVC Razor پیاده سازی کنیم .
نمودار HTML5 Canvas در ASP.Net MVC Razor با استفاده از کتابخانه Chart.js اجرا شده است. این مقاله همچنین روش نمایش نمودار متحرک HTML5 را در مرورگرهایی که از CSS3 مانند IE 8 پشتیبانی نمی کند، پوشش می دهد.
بانک اطلاعاتی
در اینجا از پایگاه Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید.
پایگاه داده Northwind را دانلود و نصب کنید
فضاهای نام
شما باید فضای نامهای زیر را وارد کنید.

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

Controller
Controller متشکل از دو روش است.
روش دست زدن به عملیات GET
در داخل این روش View بازگردانده می شود.
روش دست زدن به عملیات AJAX POST
این روش ارتباط از عملکرد AJAX جی کوئری را از View انجام می دهد.
توجه :

روش  زیر اقدام به فراخوانی AJAX می کند و از آنجایی که یک مقدار رشته بازگردانده می شود، نوع بازگشت به ContentResult تنظیم می شود.

برای اطلاعات بیشترمقاله زیر را مطالعه کنید.

برگشت محتویات رشته از Controller به View در ASP.Net MVC .
در داخل این روش ، داده ها از پایگاه داده پر شده و یک رشته JSON ساخته شده برای پر کردن نمودار HTML5 Canvas استفاده می شود.
رنگ Segment of Pie یا Donut نمودار به صورت تصادفی تولید می شود و به رشته JSON اضافه می شود.
توجه : Sleep موضوع به طور هدفمند برای تولید رنگ های تصادفی اضافه شده است، اگر تاخیر حذف شود، تمام بخش های نمودار دایره ای یا دونات از همان رنگ خواهند بود.
رشته JSON به مقدار رشته از View بازگشته می شود .

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ContentResult AjaxMethod(string country)
    {
        string query = "SELECT ShipCity, COUNT(OrderId)";
        query += " FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity";
        string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
        StringBuilder sb = new StringBuilder();
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@Country", country);
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    sb.Append("[");
                    while (sdr.Read())
                    {
                        sb.Append("{");
                        System.Threading.Thread.Sleep(50);
                        string color = String.Format("#{0:X6}", new Random().Next(0x1000000));
                        sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", sdr[0], sdr[1], color));
                        sb.Append("},");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                    sb.Append("]");
                }
 
                con.Close();
            }
        }
 
        return Content(sb.ToString());
    }
}

View
View شامل یک SELECT DropDownList HTML برای انتخاب کشور، مجموعه ای از RadioButtons برای انتخاب نوع نمودار و دو عنصر DIV است، یکی برای رندر نمودارو دیگری برای رندر legen می باشد .
روش LoadChart در 3 مکان، در load، در تغییر انتخاب DropDownList و در انتخاب RadioButton استفاده می شود.
در داخل روش LoadChart، URL برای ارتباط AJAX جی کوئری به روش Controller یعنی i.e. / Home / AjaxMethod تنظیم شده است و هنگامی که فراخوانی AJAX جی کوئری به روش Action Controller انجام می شود، پاسخ دریافت شده JSON دریافت شده به یک شی JSON تبدیل می شود
شی JSON سپس به نمودار HTML5 Canvas اعمال می شود و همچنین برای تهیه یک legend برای نمودار توسط حلقه و اضافه کردن HTML پویا به legend DIV ایجاد میشود .

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Country:
                <select id="ddlCountries">
                    <option value="USA">USA</option>
                    <option value="Germany">Germany</option>
                    <option value="France">France</option>
                    <option value="Brazil">Brazil</option>
                </select>
                <table id ="rblChartType" border="0">
                    <tr>
                        <td><input type="radio" name="ChartType" value="1" checked="checked"/>Pie</td>
                        <td><input type="radio" name="ChartType" value="2"/>Doughnut</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvChart">
                </div>
            </td>
            <td>
                <div id="dvLegend">
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            LoadChart();
            $("#ddlCountries").bind("change", function () {
                LoadChart();
            });
            $("#rblChartType input").bind("click", function () {
                LoadChart();
            });
        });
        function LoadChart() {
            var chartType = parseInt($("#rblChartType input:checked").val());
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: "{country: '" + $("#ddlCountries").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "text",
                success: function (response) {
                    $("#dvChart").html("");
                    $("#dvLegend").html("");
                    var data = eval(response);
                    var el = document.createElement('canvas');
                    $("#dvChart")[0].appendChild(el);
 
                    //Fix for IE 8
                    if ($.browser.msie && $.browser.version == "8.0") {
                        G_vmlCanvasManager.initElement(el);
                    }
                    var ctx = el.getContext('2d');
                    var userStrengthsChart;
                    switch (chartType) {
                        case 1:
                            userStrengthsChart = new Chart(ctx).Pie(data);
                            break;
                        case 2:
                            userStrengthsChart = new Chart(ctx).Doughnut(data);
                            break;
                    }
                    for (var i = 0; i < data.length; i++) {
                        var div = $("<div />");
                        div.css("margin-bottom", "10px");
                        div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                        $("#dvLegend").append(div);
                    }
                },
                failure: function (response) {
                    alert('There was an error.');
                }
            });
       }
    </script>
</body>
</html>

 


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

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