همه دسته بندی ها

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد چارت در ASP.NET MVC3

چهارشنبه 22 خرداد 1392

ایجاد چارت در ASP.NET MVC3 <br/> امروزه چارت ها در ارائه آمار و اطلاعات در زمینه های مخنلف جایگاه مهم و بسزایی رو دارند و با گسترش روز افزون سیستم های تحت وب وجود چارت ها برای ارائه آمار و اطلاعات یک سایت امری الزامیست.

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

با ارائه sp1 دات نت فریمورک 3.5 مایکروسافت کنترل جدیدی رو تحت عنوان asp:chart به مجموعه کنترل های ASP.NET اضافه کرد که این کنترل در نسخه بعدی دات نت یعنی دات نت 4.0 جزئی از فریمورک شد و هم در برنامه های win و هم در برنامه های web کنترل chart در ToolBox موجود و قابل استفاده است.

در این مقاله خواهیم دید که چطور می توان آمار و اطلاعات مورد نظر را تحت قالب chart در ASP.NET MVC نسخه 3 نمایش داد.

یک راه حل این است که خودمان تگ های html ای را با ساختار و استایل مناسب در view مورد نظرمان render کنیم.

اما راه حل ساده تری هم وجود دارد و آن استفاده از ASP.NET Web Helpers Library می باشد که توسط مایکروسافت ایجاد شده و شامل توابع و کلاس هایی برای کارهای رایج و معمول در وب می باشد که در این بین کلاس هایی برای کار با FaceBook,Twitter,Gravatar,Bing,… را نیز دارا می باشد.

برای اضافه کردن این Library به پروژه یا می باید dll مربوطه را دانلود نمائید و سپس Add Reference کنید و یا اینکه چنانچه افزونه NuGet بر روی سیستمتان (VS) نصب می باشد می توانید در پنجره Solution Explorer روی گزینه References کلیک راست نموده و گزینه Manage NuGet Packages را انتخاب کنید.


سپس با انتخاب گزینه All از سربرگ Online منتظر بمانید تا لیستی از Library هایی که بیشترین دانلود را داشته اند ظاهر گردد


از لیست نمایان شده گزینه ASP.NET Web Helpers Library را انتخاب نموده و بر روی دکمه Install کلیک کنید. با این کار dll مربوط به این کتابخانه به پروژه شما اضافه خواهد شد و می توانید از آن استفاده کنید


همه چیز برای شروع کدنویسی آماده است.

یک ActionResult جدید با نام DrawChart ایجاد کرده و متغیری از نوع string به منظور نوع چارت مورد نظرمان به عنوان آرگومان ورودی برای این ActionResult قرار می دهیم

public ActionResult DrawChart(string chatType)
  1.         {
  2.             var chart =
  3.                 new Chart(width: 500, height: 400)
  4.                 .AddTitle("Chart Title")
  5.                 .AddSeries
  6.                             (
  7.                                 chartType: chatType,
  8.                                 xValue: new[] { "A", "B", "C", "D" },
  9.                                 yValues: new[] { "26", "35", "8", "19" }
  10.                             )
  11.                 .GetBytes("png");
  12.             return File(chart, "image/bytes");
  13.         }

مرحله بعد این خواهد بود که خروجی عکس را در یک img نمایش دهیم. این امر را با فراخوانی ActionResult خود که DrawChart نام دارد و ارسال پارامتر مورد نظر به آن انجام می دهیم.


  1. <img src="@Url.Action("DrawChart", new { chatType = "pie" })" alt="Pie Chart" />

  2. <img src="@Url.Action("DrawChart", new { chatType = "bar" })" alt="Bar Chart" />

  3. <img src="@Url.Action("DrawChart", new { chatType = "column" })" alt="Column Chart" />

خروجی به صورت زیر خواهد بود


ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید