bfakhriloo
چهارشنبه 20 دی 1391, 11:49 صبح
سلام دوستان
نمی دونم قبلا همچین تاپیکی اینجا وجود داشته یا نه، و امیدوارم تکراری نباشه، ولی به هر حال امیدوارم این تاپیک برای شما مفید باشه.
(برای مشاهده ی نمونه ای از نمودار، می تونید پیوست رو ببینید)
رسم نمودار تو پروژه های وب هنگامی که می خواید گزارش رو درست کنید از داده ها، لازم میشه. یکی از این مواردی که من تو یکی از پروژه هام به نمودار نیازمند شدم، رسم داده های دریافتی از Google Analytic و نمایش آمار روزانه بازدید از سایت بود. وقتی شروع به جست و جو کردم، به یه کتابخونه وابسته به Jquery رسیدم که رایگان و open source، و قابلیت های خیلی زیادی داره. این کتابخونه جاوا اسکریپت jqplot (https://tjs87.wordpress.com/weblog/10/jqplot.com)هست، و هماهنگی خوبی هم با محصولات مایکروسافت داره و حتی کنترل هایی هم برای ASP.NET web form. اما برای استفاده از اون در ASP.NET MVC، از اونجایی که خوشبختانه!! (بله خوشبتانه!) خبری از کنترل های سفارشی نیست، باید به طور مستقیم خودتون دست به کار بشید و نمودار هاتون رو رسم کنید.
تو مثالی که برای کار کردن با jqplot برای شما آماده کردم، ما داده هایی متشکل از تاریخ و یک عدد برای هر تاریخ (که مثلا میتونه نشون دهنده ی آمار بازدید از سایت برای اون تاریخ باشه) رو برای ساختار داده انتخاب می کنیم:
public class DailyHit
{
public String DayDate { get; set; }
public int Hits { get; set; }
}
فرض ما بر این که namespace برنامه ی شما Yourname و کلاسی که تعریف کردیم تو پوشه ی Models قرار گرفته. حالا نوبت به تعریف Action می رسه:
public ActionResult GetDailyReport()
{
//GetReport method return list of daily reports in form of IEnumerable
var result = _VisitiReportService.GetReport();
return View(result);
}
ما در اینجا فرض می کنیم که شما سرویسی برای دریافت گزارش های بازدید روزانه دارید (می تونید خودتون مکانیسیمی برای ثبت بازدید ها داشته باشید و از دیتابیس خودتون داده ها رو بخونید، یا متصل بشید به یه سرویس دیگه مثل Google Analytic و داده ها رو از اونجا استخراج کنید) که داده ها رو در قالب فهرستی از DailyHit ها بر می گردونه. این داده ها رو در قالب مدل، به View مربوط به خودش ارسال می کنیم. این هم از View :
@model IEnumerable<YourName.Models.DailyHit>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqplot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.highlighter.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.cursor.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.json2.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.jqplot.min.css")" rel="stylesheet" type="text/css" >
<script type="text/javascript">
$(document).ready(function () {
var plot1 = $.jqplot('reportChart', [chartline1], {
title:'Report',
legend:
{ show: true, placement: 'outside',location:'ne',marginTop: '30px',showLabels: true },
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'%d'
},
min:0
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
});
</script>
<div id="reportChart" style="width: 600px; height: 400px; position: relative;">
</div>
اول از همه باید کتابخونه Jquery رو به صفحه اضافه کرده باشید. ما فرض بر این گذاشتیم که شما از layout (یا همون Site.master تو aspx) استفاده نکردید و View رو دارید به طور مستقل و بدون داشتن قالب کلی نمایش می دید، پس به طور صریح اشاره کردیم به Jquery. بعد برای این که بتونیم از Jqplot استفاده کنیم، باید اول از همه به اسکریپت jqplot.min.js ارجاع بدیم. از اونجایی که می خوایم کاربر با رفتن روی خطوط نمودار، مقادیر ببینه نیاز داریم که highlighter هم اضافه کنیم. ارجاع به cursor برای این که با ورود موس به منطقه ی نمودار، شکلش تغییر کنه ما تو اینجا ازش استفاده ای نداریم. dateAxisRenderer به طور خاص برای نمایش نمودارهایی هست که توش بخشی از داده، از نوع تاریخ (Date) هست. و در نهایت از اونجایی که داده ها در قالب json تحویل لود کننده ی نمودار داده میشن، باید از json2.min هم استفاده کنیم.
و اخر سر هم یک ارجاع به فایل قالب jqplot نیاز داریم.
اما script که برای لود کردن نمودار تعریف کردیم. تو اولین خط، یعنی
var chartline1=@Html.GetStrippedJson(Json.Encode(Model ));
ما از دو Helper استفاده می کنیم، یکی Json.Encode که جزو Helper های خود MVC هست و یک شی رو تبدیل می کنه به رشته ی JSON. اما از اونجایی که تو Jqplot، نباید نام property ها تو رشته ی json وجود داشته باشه، ما ناچاریم که اونا رو اصطلاحا Strip کنیم. برای این کار قطعا کتابخونه ای مثل Newtoon.Json خیلی مفید تره که قابلیت های زیادی داره ولی من خودم یک Helper نوشتم که این کار رو برای ما انجام بده:
public static MvcHtmlString GetStrippedJson(this HtmlHelper helper, string json)
{
json = json.Replace("\"DayDate\":", string.Empty);
json = json.Replace("\"Hits\":", string.Empty);
json = json.Replace('}', ']');
json = json.Replace('{', '[');
return MvcHtmlString.Create(json);
}
تو کد بالا، هر جا که DayDate و Hits رو ببینه، جاش رشته ی خالی میذاره و به جای } و { هم، [ و ] رو قرار میده تا تبدیل بشه به رشته ی استاندارد Json.
خوب حالا ما داده هامون رو تو متغیر chartline1 داریم.
نوبت می رسه به رسم نمودار. برای این کار اولین پارامتری که به تابع مربوط به رسم، یعنی jqplot می فرستیم، محل رسم نمودار تو صفحه است. این محل باید تگ div باشه و id اون رو می فرستیم به عنوان پارامتر اول تابع رسم نمودار. بعد نوبت می رسه به داده هامون، که ما از قبل تو chartline1 ذخیره کردیم شون. پارامترهای بعدی شامل عنوان نمودار، نمایش برچسب خطوط نمودار در کنار اون، تنظیم محور افقی و عمودی میشه. مثلا تو تنظیم محور افقی (xaxis) ما داریم به نمودار میگیم که باید از نوع تاریخ باشه و فرمت نمایش اون رو هم براش تعیین می کنیم، تا فاصله ی بین هر نقطه از داد ها روی نمودار افقی رو تعیین کنیم. برای نمودار عمودی، که قراره تعداد بازدید های روز رو نشون بده، قالب نمایش رو مقدار عددی (D – به معنای digit) می گذاریم، و مشخص می کنیم که کمترین مقدار نمودار در محور عمودی باید صفر باشه.
پارامتر بعدی، مربوط به highlighter هست که به نمودار میگه با رفتن کاربر به هر کدوم از محل های تقاطع روز/تعداد بازدید، تعداد بازدید رو به همراه تاریخ اون روز، نمایش بده و اون نقطه رو هم highlight کن.
خوب، منتظر چی هستید! برید امتحان کنید دیگه
پیروز باشید
نمی دونم قبلا همچین تاپیکی اینجا وجود داشته یا نه، و امیدوارم تکراری نباشه، ولی به هر حال امیدوارم این تاپیک برای شما مفید باشه.
(برای مشاهده ی نمونه ای از نمودار، می تونید پیوست رو ببینید)
رسم نمودار تو پروژه های وب هنگامی که می خواید گزارش رو درست کنید از داده ها، لازم میشه. یکی از این مواردی که من تو یکی از پروژه هام به نمودار نیازمند شدم، رسم داده های دریافتی از Google Analytic و نمایش آمار روزانه بازدید از سایت بود. وقتی شروع به جست و جو کردم، به یه کتابخونه وابسته به Jquery رسیدم که رایگان و open source، و قابلیت های خیلی زیادی داره. این کتابخونه جاوا اسکریپت jqplot (https://tjs87.wordpress.com/weblog/10/jqplot.com)هست، و هماهنگی خوبی هم با محصولات مایکروسافت داره و حتی کنترل هایی هم برای ASP.NET web form. اما برای استفاده از اون در ASP.NET MVC، از اونجایی که خوشبختانه!! (بله خوشبتانه!) خبری از کنترل های سفارشی نیست، باید به طور مستقیم خودتون دست به کار بشید و نمودار هاتون رو رسم کنید.
تو مثالی که برای کار کردن با jqplot برای شما آماده کردم، ما داده هایی متشکل از تاریخ و یک عدد برای هر تاریخ (که مثلا میتونه نشون دهنده ی آمار بازدید از سایت برای اون تاریخ باشه) رو برای ساختار داده انتخاب می کنیم:
public class DailyHit
{
public String DayDate { get; set; }
public int Hits { get; set; }
}
فرض ما بر این که namespace برنامه ی شما Yourname و کلاسی که تعریف کردیم تو پوشه ی Models قرار گرفته. حالا نوبت به تعریف Action می رسه:
public ActionResult GetDailyReport()
{
//GetReport method return list of daily reports in form of IEnumerable
var result = _VisitiReportService.GetReport();
return View(result);
}
ما در اینجا فرض می کنیم که شما سرویسی برای دریافت گزارش های بازدید روزانه دارید (می تونید خودتون مکانیسیمی برای ثبت بازدید ها داشته باشید و از دیتابیس خودتون داده ها رو بخونید، یا متصل بشید به یه سرویس دیگه مثل Google Analytic و داده ها رو از اونجا استخراج کنید) که داده ها رو در قالب فهرستی از DailyHit ها بر می گردونه. این داده ها رو در قالب مدل، به View مربوط به خودش ارسال می کنیم. این هم از View :
@model IEnumerable<YourName.Models.DailyHit>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqplot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.highlighter.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.cursor.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.json2.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.jqplot.min.css")" rel="stylesheet" type="text/css" >
<script type="text/javascript">
$(document).ready(function () {
var plot1 = $.jqplot('reportChart', [chartline1], {
title:'Report',
legend:
{ show: true, placement: 'outside',location:'ne',marginTop: '30px',showLabels: true },
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'%d'
},
min:0
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
});
</script>
<div id="reportChart" style="width: 600px; height: 400px; position: relative;">
</div>
اول از همه باید کتابخونه Jquery رو به صفحه اضافه کرده باشید. ما فرض بر این گذاشتیم که شما از layout (یا همون Site.master تو aspx) استفاده نکردید و View رو دارید به طور مستقل و بدون داشتن قالب کلی نمایش می دید، پس به طور صریح اشاره کردیم به Jquery. بعد برای این که بتونیم از Jqplot استفاده کنیم، باید اول از همه به اسکریپت jqplot.min.js ارجاع بدیم. از اونجایی که می خوایم کاربر با رفتن روی خطوط نمودار، مقادیر ببینه نیاز داریم که highlighter هم اضافه کنیم. ارجاع به cursor برای این که با ورود موس به منطقه ی نمودار، شکلش تغییر کنه ما تو اینجا ازش استفاده ای نداریم. dateAxisRenderer به طور خاص برای نمایش نمودارهایی هست که توش بخشی از داده، از نوع تاریخ (Date) هست. و در نهایت از اونجایی که داده ها در قالب json تحویل لود کننده ی نمودار داده میشن، باید از json2.min هم استفاده کنیم.
و اخر سر هم یک ارجاع به فایل قالب jqplot نیاز داریم.
اما script که برای لود کردن نمودار تعریف کردیم. تو اولین خط، یعنی
var chartline1=@Html.GetStrippedJson(Json.Encode(Model ));
ما از دو Helper استفاده می کنیم، یکی Json.Encode که جزو Helper های خود MVC هست و یک شی رو تبدیل می کنه به رشته ی JSON. اما از اونجایی که تو Jqplot، نباید نام property ها تو رشته ی json وجود داشته باشه، ما ناچاریم که اونا رو اصطلاحا Strip کنیم. برای این کار قطعا کتابخونه ای مثل Newtoon.Json خیلی مفید تره که قابلیت های زیادی داره ولی من خودم یک Helper نوشتم که این کار رو برای ما انجام بده:
public static MvcHtmlString GetStrippedJson(this HtmlHelper helper, string json)
{
json = json.Replace("\"DayDate\":", string.Empty);
json = json.Replace("\"Hits\":", string.Empty);
json = json.Replace('}', ']');
json = json.Replace('{', '[');
return MvcHtmlString.Create(json);
}
تو کد بالا، هر جا که DayDate و Hits رو ببینه، جاش رشته ی خالی میذاره و به جای } و { هم، [ و ] رو قرار میده تا تبدیل بشه به رشته ی استاندارد Json.
خوب حالا ما داده هامون رو تو متغیر chartline1 داریم.
نوبت می رسه به رسم نمودار. برای این کار اولین پارامتری که به تابع مربوط به رسم، یعنی jqplot می فرستیم، محل رسم نمودار تو صفحه است. این محل باید تگ div باشه و id اون رو می فرستیم به عنوان پارامتر اول تابع رسم نمودار. بعد نوبت می رسه به داده هامون، که ما از قبل تو chartline1 ذخیره کردیم شون. پارامترهای بعدی شامل عنوان نمودار، نمایش برچسب خطوط نمودار در کنار اون، تنظیم محور افقی و عمودی میشه. مثلا تو تنظیم محور افقی (xaxis) ما داریم به نمودار میگیم که باید از نوع تاریخ باشه و فرمت نمایش اون رو هم براش تعیین می کنیم، تا فاصله ی بین هر نقطه از داد ها روی نمودار افقی رو تعیین کنیم. برای نمودار عمودی، که قراره تعداد بازدید های روز رو نشون بده، قالب نمایش رو مقدار عددی (D – به معنای digit) می گذاریم، و مشخص می کنیم که کمترین مقدار نمودار در محور عمودی باید صفر باشه.
پارامتر بعدی، مربوط به highlighter هست که به نمودار میگه با رفتن کاربر به هر کدوم از محل های تقاطع روز/تعداد بازدید، تعداد بازدید رو به همراه تاریخ اون روز، نمایش بده و اون نقطه رو هم highlight کن.
خوب، منتظر چی هستید! برید امتحان کنید دیگه
پیروز باشید