رسم نمودار در ASP.NET MVC با Highcharts

در پست قبلی به معرفی کتابخانه highcharts برای رسم نمودار های تعاملی تحت جاوا اسکریپت پرداختیم و در این مطلب قصد دارم چگونگی رسم یک نمودار نسبتا ساده رو با استفاده از این کتابخانه آموزش بدم.

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

_ اول اینکه با تمامی مرورگرها از جمله IE+6 و  iPhone/iPad سازگار هست .

_ این کتابخانه برای مصارف غیر تجاری رایگان هست {لیست قیمت های تجاری} (البته تو ایران کلا رایگانه !).

_ کاملا سورس باز هست و شما می تونید کدهای اون رو مطابق با سلیقه شخصیتون تغییر بدید که این انعطاف پذیری رو بسیار بالا میبره.

_ بر مبنای جاوا هست و این یعنی که برای اجرا فقط به فایل highcharts.js و jquery.js و یا MooTools نیاز داره و دیگه لازم نیست رو سرور خود چیزی نصب کنید یا از کاربر تقاضای نصب چیزی مثل فلش و نمی دونم چیچی بکنید.

_ از انوع متفاوت چارت ها پشتیبانی می کنه (18 نوع متفاوت) که در دمو ها 56 شکل پیاده سازی از انوع مختلف رو نمایش داده.

_ قابلیت های بسیاری مثل زوم کردن ، برعکس کردن نمودار، چرخش برچسبها، tooltip ها و رابط تعاملی جالبی داره.

_ می تونید به راحتی نمودار رو پرینت بگیرید یا با فرمت های PNG,JPEG,PDF,SVG ذخیره کنید.

و ... .

_ برای شروع یادگیری ابتدا یک پروژه جدید mvc 4 در ویژوال استودیو ایجاد کرده، آنگاه Package Manager Studio رو باز کرده و در حالی که به اینترنت متصل هستید دستور زیر را وارد کنید.

PM> install-package dotnet.highcharts

اگر دستور به درستی اجرا شده باشد یک ارجاع به کتابخانه DotNet.Highcharts به قسمت References های پروژتون اضافه میشه و همچنین در پوشه Scripts می بینید که یک پوشه جدید با نام Highcharts-3.0.1 ایجاد شده است که کتابخانه جاوا مورد نیاز ما برای رسم نمودار در همین پوشه قرار دارند.

 

_ فایل BundleConfig.cs رو باز کنید و خطوط زیر را به آن اضافه کنید.

            bundles.Add(new ScriptBundle("~/bundles/Highcharts").Include(
            "~/Scripts/Highcharts-{version}/highcharts.js"
            , "~/Scripts/jquery-{version}.js"));

اگر  با مفهوم Bundling آشنا نیستید می تونید به اینجا(شماره 13) و اینجا و اینجا مراجعه کنید.

_ یک کنترل جدید به نام ChartController بسازیدو using های زیر رو بهش اضافه کنید.

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using Point = DotNet.Highcharts.Options.Point;

_ یک ActionResult جدید با نام RegisteredUserChart ایجاد کنید.

        public ActionResult RegisteredUserChart()
        {

        }

_ خب در این مثال من می خوام نمودار کاربران ثبت نام شده رو به تفکیک ماه ثبت نام و جنسیت ، نمایش بدهم. Highchart داده ها رو به صورت یک آرایه دریافت می کند پس شما می تونید از هر نوع منبعی اطلاعات رو استخراج کرده و بهش ارسال کنید که در اینجا من از EF استفاده می کنم.

ابتدا یک شی Context برای اتصال به بانک اطلاعاتی ایجاد می کنیم.

            Context db = new Context();

_ کدهای کلاس People که من در پروژه خودم دارم و اطلاعات اشخاص در این کلاس (جدول در بانک اطلاعاتی) هستند  به شکل زیر است:

    public class People
    {
        public Guid Id { get; set; }
        
        public String FirstName { get; set; }
        
        public String LastName { get; set; }

        public String NationalCode { get; set; }

        [DataType(DataType.EmailAddress)]
        public String Email { get; set; }
    
        public Boolean? Gender { get; set; }
        
        public DateTime? RegisterDate_ { get; set; }
    }

حالا کدهای زیر را اضافه می کنیم :

            Point[] manPoints = new Point[12];
            Point[] womenPoints = new Point[12];

            for (int i = 0; i < 11; i++)
            {
                manPoints[i] = new Point { Y = db.Peoples.Count(x => x.RegisterDate_.Month == i + 1 && x.Gender == true) };
                womenPoints[i] = new Point { Y = db.Peoples.Count(x => x.RegisterDate_.Month == i + 1 && x.Gender == false) };
            }

آرابه Point در واقع اطلاعاتی هستند که روی نمودار رسم می شوند.

_ و حالا کدهای نمودار :

            Highcharts chart = new Highcharts("chart")
                .InitChart(new Chart
                {
                    DefaultSeriesType = ChartTypes.Column,
                    MarginRight = 130,
                    MarginBottom = 25,
                    ClassName = "chart"
                })
                .SetTitle(new Title
                {
                    Text = "آمار کاربران ثبت نام شده ماهانه",
                    X = -20
                })
                .SetSubtitle(new Subtitle
                {
                    Text = "گزارش ثبت نام کاربران در سامانه به تفکیک جنسیت و ماه",
                    X = -20
                })
                .SetXAxis(new XAxis { Categories = new[] { "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند" } })
                .SetYAxis(new YAxis
                {
                    Title = new YAxisTitle { Text = "تعداد" },
                    PlotLines = new[]
                            {
                                new YAxisPlotLines
                                    {
                                        Value = 0,
                                        Width = 1,
                                        Color = ColorTranslator.FromHtml("#808080")
                                    }
                            }
                })
                .SetTooltip(new Tooltip
                {
                    Formatter = @"function() {
                                        return '<b>'+ this.series.name +'</b><br/>'+
                                    this.x +': '+ this.y +' نفر ';
                                }"
                })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Vertical,
                    Align = HorizontalAligns.Right,
                    VerticalAlign = VerticalAligns.Top,
                    X = -10,
                    Y = 100,
                    BorderWidth = 0
                })
                .SetSeries(new[]
                    {
                        new Series { Name = "مرد", Data = new Data(manPoints) },
                        new Series { Name = "زن", Data = new Data(womenPoints) },
                    }
                );

 و همچنین :

return View("Index", chart);

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

و در آخر کدهای قسمت View :

@model  DotNet.Highcharts.Highcharts

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/DefaultMaster.cshtml";
}
@section Scripts {
    @Scripts.Render("~/bundles/Highcharts")
}
<script type="text/javascript">
    $(function () {
        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
    });
</script>

 @(Model)

اون اسکریپت در مثال های خود Highcharts اورده شده و برای دادن گرادیانت به نمودار می باشد که اون رو زیباتر میکند.

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

 

سوالی بود در خدمتیم.