نویسار

یادداشت های یک برنامه نویس وب

نویسار

یادداشت های یک برنامه نویس وب

نویسار

اینجا صرفا محلی برای یاداشتها و بیان تجربه های شخصی صاحب وبلاگ می باشد.

پیوندهای روزانه

رسم نمودار در 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 اورده شده و برای دادن گرادیانت به نمودار می باشد که اون رو زیباتر میکند.

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

 

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

نظرات  (۱۵)

محتوای مفیدی بود دستتون درد نکنه من استفاده کردم
با سلام خدمت همگی مشکل رو حل کردم با این تیکه کد
.SetOptions(new GlobalOptions { Lang = new DotNet.Highcharts.Helpers.Lang().SetAndUseCulture("fa-IR") })

اما برا نمونه چارت های دیگه هم میتونید از این سایت بگیرید...

همشون داخل همون View ٰندر کنید....
https://github.com/fairmat/DotNet.Highcharts/blob/master/DotNet.Highcharts
/DotNet.Highcharts.Samples/Controllers/HoTosController.cs
سوالی بود در خدمتم...
بابت آموزش خوب تون ممنون...

ولی چطور میشه جای ماه ها تاریخ رو نمایش داد .. به طور مثال 1 مهر ماه و الی آخر....(برای نمودار سینوسی)

من با رسم نمودار سینوسی مشکل ندارم ولی تاریخ نمیدونم چطور شمسی نمایش بدم....

با تشکر





۱۱ آذر ۹۴ ، ۲۰:۵۴ مهسا نوروزی
نوع RegisterDate_ نباید allow null باشه
و در حلقه for باید i کوچیکتر از 12 باشه
for (int i = 0; i < 12; i++)
۱۶ آبان ۹۴ ، ۲۳:۲۲ مهسا نوروزی
سلام
بابت این آموزش تشکر میکنم، فقط میخواستم یک نکته بگم
دستور install-package dotnet.highcharts برای من خطای the remote name could not be resolved 'www.nuget.org' میداد
به جاش من از دستور Install-package DotNet.Highcharts استفاده کردم و Package source رو روی Nuget official package source تنظیم کردم
اینو گفتم شاید کسی مثل من با همچین خطایی برخورد کرده باشه
سلام ببخشید من استادمون ازم اینو خواسته متاسفانه هرجا گشتم درموردش موضوعی و مطلبی پیدانکردم خواهش میکنم اگ میدونین کجا متنی درموردش هست بم بگین توروخدا
پیاده سازی یک صحنه متحرک با استفاده از تکنولوژی اپن جی ال Opengl
این موضوعشه منتظرجوابتونم
پاسخ:
متاسفانه اطلاعاتی در این موضوع ندارم.
سلام متاسفانه باز هم ارور داد . میشه اصل فایل نمونه رو واسه دانلود بگذارید

مرسی
با سلام و تشکر

هنگام Using کردن DotNet.highlightchart در mVc 4 خطا میده

The type or namespace name 'DotNet' could not be found (are you missing a using directive or an assembly reference?)

دلیلش چیه ؟
البته من از PM Console پکیج رو نصب کردم ؟
پاسخ:
یکبار دیگر هم با همون روش که معرفی شده (Nuget) امتحان کنید ببینید برطرف می شود یا خیر.
ممنون از مطالب خوبتون. در نمایش صفحات فارسی RTL عنوان ها درست نمایش داده نمی شوند. ولی در تصویری که شما گذاشته اید درست هستند. صفحات شما چگونه تنظیم شده است؟
۱۷ شهریور ۹۳ ، ۱۳:۴۹ محمدرضا پورباقر
با سلام و عرض خسته نباشید
من با زبان سی شارپ کار کردم اما با MVC آشنایی ندارم.
امکانش هست سورس توضیحات بالا رو در قالب یک پروژه MVC بزارید. تا با فولدرها و فایلهای اون آشنا بشم و بتونم استفاده کنم از توضیحات شما.
با تشکر
سلام.وقتتون بخیر.توضیحاتتون واقعا عالی بود.من به live highchart نیاز دارم.میشه لطف کنید و یه توضیح واسم بدید.
با سپا فراوان
پاسخ:
اینجا نحوه ایجاد یک چارت با پردازش داده های بی وقفه توضیح داده شده است:http://www.highcharts.com/docs/working-with-data/preprocessing-live-data
فقط دقت کنید چون کدهای قرار داده شده به زبان php هست شما باید در کد آجاکس به جای url آدرس کنترلر خودتون رو در mvc قرار بدید و در کنترلر هم داده ها رو به صورت JSON ارسال نمایید.
با نهایت سپاس از زحمات بی دریغ شما و اموزش های فوق العاده شما .
۱۰ تیر ۹۲ ، ۰۰:۰۰ میثم هوشمند
سلام
ممنونم که در پست من شرکت کردید و نظر دادید
اجالتا این لینک را ملاحظه بفرمایید
قرابت محتوایی خوبی دارد با این پست شما! :)
http://vsblogger.blogfa.com/
http://vsblogger.blog.ir
نسخه ی لاگ آی آرش البته هنوز راه نیفتاده!

راستی در خصوص بحث تولید محتوای فارسی فنی خبرهای خوبی در راه هست
! منتظر باشید! :)
پاسخ:
سپاس از شما.
بله قبلا سر زده بودم که نسخه blog.ir مثل اینکه هنوز راه نیوفتاده.
منتظریم.
عالی بود! ممنون.
سلام ؛

ضمن تشکر از مطالب خوب شما .

ما برنامه نویسان (خصوصا برنامه نویسان وب) باز از اشتباه فاحش به کار گیری جاوا به جای جاوااسکریپت خودداری کنیم.

Java to Javascript is car to carpet !

ممنون.
پاسخ:
ممنون از تذکر شما :)
دیدن اینجا هم خالی از لطف نیست.

ارسال نظر

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