| |
| |
|
تبلیغات | |
جستجو، دایرکتوری وب فارسی، 118، لغت نامه، تقویم، اخبار و ...
در جستجوگر ریسمون | |
| | |
توسط :
مديريت سايت
(1386/11/7) | بازدید :
4994
اکثر برنامه های تحت وب جهت افزایش کارایی و همچنین ارائه گزارش های آماری به چارت ها یا همان نمودار های آماری نیاز دارند. در این مقاله پس از مقدمه ای کوتاه در مورد OWC به نحوه ایجاد نمودار های آماری به کمک آن می پردازیم.
همواره نمودارها به عنوان یکی از مفید ترین اجزای فرم های گزارش گیری بوده است که به مخاطبان برنامه شما قدرت درک بهتری می دهند مخصوصا" در برنامه های کاربردی تحت وب!
ایجاد نمودارهای آماری در برنامه تحت وب عموما" احتیاج به یک ابزار خارجی و شخص سوم دارد که به ما توانایی رسم پویای نمودار ها را بدهد. یکی از کم خرج ترین و ساده ترین راه ها استفاده از Office Web Components (OWC) می باشد. با صرف نظر کردن از تقسیم بندی ابزار های موجود و مقایسه بین آنها می توان گفت OWC کاملا" انعطاف پذیر است و می توان حتی کوچک ترین اجزای نمایشی نمودار ها را تعریف و تغییر داد در نهایت با صرف اندکی زمان جهت تنظیمات اجزا ، به نمودار های بسیار حرفه ای و پیچیده ای دست خواهیم یافت. نمونه ای از این نمودار ها در همین سایت طبق لینک های زیر در دسترس شما هستند :
OWC
مخفف Office Web Components و شامل مجموعه ای از کنتزل های Microsoft Office است. با استفاده از این کنترل ها امکانات جدیدی جهت آنالیز اطلاعات و گزارش گیری بهتر در برنامه های تحت وب برای ما فراهم می شود. OWC مجموعه ای از کنترل های COM است که شامل چهار بخش اصلی زیر می باشد :
-
Spreadsheet
-
Chart
-
PivotTable
-
Data Source
OWC Charts
امکان ترسیم نمودار را برای ما فراهم می آورد. برای نمایش نمودار در یک صفحه وب 7 هفت مرحله را باید در نظر گرفت :
1 - خواندن اطلاعات از پایگاه داده ها جهت رسم نمودار.
2 - ساخت OWC Chart.
3 - اضافه کردن یک یا چند نمودار.
4 - الحاق مقادیر به هر نمودار که در مرحله قبل اضافه شده است.
5 - تنظیمات اجزای نمودار ها جهت نمایش آنها ، آنگونه که خودمان می خواهیم.
6 - ایجاد تصویر از نمودار(ها).
7 - نمایش تصویر در کنترل Image یا تگ <img> .
اطلاعات مورد نیاز می تواند از منابع داده مختلفی تهیه شود. یک XmlStream یا حتی یک آرایه از نوع String. مشکلی که در حین استفاده از این کامپوننت حین کار در Asp.net داریم اینست که یک Dataset نمی تواند نقش منبع داده را برای ما بازی کند. من برای حل این مشکل در Aspcode به کمک تکرار کننده for each دو آرایه رشته ای از محتویات Dataset ایجاد کردم.
نحوه ترسیم نمودار در Asp.net با استفاده از #C :
اولین مرحله اضافه کردن OWC به Reference های برنامه است. برای این منظور بعد از کلیک راست روی عنوان پروژه در Solution Explorer گزینه Add References را انتخاب کرده و به تب COM بروید. Microsoft Office 11.0 Object Library را انتخاب و Ok کنید.
حال فضا نام زیر را در برنامه خود فراخوانی کنید :
|
using Microsoft.Office.Interop.Owc11;
|
برای ایجاد نمودار تابع BuildCharts را کد نویسی کردیم. جهت جلوگیری از حجیم شدن متن مقاله تنها به بخش های مهم این قطعه کد پرداخته شده است و در صورت تمایل کد کامل برنامه را می توانید در انتهای همین مقاله دریافت کنید.
private void BuildCharts()
{
//........
} |
اولین مرحله واکشی اطلاعات است. من از دو آرایه رشته ای استفاده کردم.chartCategoriesArr نماینده محور x ها و chartValuesArr نماینده محور y ها می باشد. جامعه آماری ما دارای پیج عنصر است.
string[] chartCategoriesArr = new string[] {"Alireza", "Ahmad",
"Sasan", "Hamed", "Amir"};
string[] chartValuesArr = new string[] { "18", "20", "19", "12", "16" };
string chartCategoriesStr = String.Join("\t", chartCategoriesArr);
string chartValuesStr = String.Join("\t", chartValuesArr); |
حال اقدام به ایجاد شیء از کلاس ChartSpaceClass و تعریف نوع نمودار خود می کنیم :
ChartSpaceClass oChartSpace = new ChartSpaceClass();
ChartChartTypeEnum chartType;
chartType = ChartChartTypeEnum.chChartTypeColumn3D; |
نکته مهم در این بخش اینست که اگر از نمودار های دایره ای استفاده می کنید یقینا" متن ها باید در یک فضای مشخص در پایین یا بالای آن قرار گیرد. برای همین منظور با استفاده از یک دستور شرطی آن را مدیریت می کنیم :
if (chartType == ChartChartTypeEnum.chChartTypePie ||
chartType == ChartChartTypeEnum.chChartTypePie3D ||
chartType == ChartChartTypeEnum.chChartTypeDoughnut)
{
oChartSpace.HasChartSpaceLegend = true;
oChartSpace.ChartSpaceLegend.Position = ChartLegendPositionEnum.chLegendPositionBottom;
} |
chLegendPositionBottom محل نوشته را در پایین محیط کاری وHasChartSpaceLegend = true; برای نوشته ها یک محیط متمایز را در نظر می گیرد. بنابراین حین استفاده از این نمودار ها ضمن عدم نیاز به تنظیمات مجدد، محور x ها که در اینجا نام افراد است در یک کادر مستطیلی همراه با رنگ نمایانگر هر اسم در نمودار ، نمایش داده می شود.
خاطر نشان می کنم جهت جلوگیری از حجیم شدن متن مقاله تنها برخی از قسمت ها که ممکن است ابهام آور باشد، برای خوانندگان توضیح داده شده است. پس از دریافت کد کامل این مقاله می توانید با رجوع به فایل Default.aspx.cs و بررسی توضیحاتی که در آن قرار دارد با نحوه تنظیم رنگ ها، فونت ها و دیگر موارد لازم آشنا شوید.
از دیگر موارد مهم این کد انقیاد داده ها به نمودار است :
oChartSpace.Charts[0].SeriesCollection[0].SetData(ChartDimensionsEnum.chDimCategories,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), chartCategoriesStr);
oChartSpace.Charts[0].SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues,
Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), chartValuesStr); |
همچنین OWCChart خروجی نمودار را بوسیله دستور GetPicture کلاس ChartSpaceClass بصورت آرایه ای از نوع بایت برای ما فراهم می کند :
| byte[] byteArr = (byte[])oChartSpace.GetPicture("jpg", 400, 450); |
شما می توانید انواع jpg , gif یا png را برای تصویر نمودار انتخاب کنید!
در بخش انتهایی کد، خروجی را در یک جلسه (Session) ذخیره کردیم تا بعدا" با کمک HttpHandler آن را در یک کنترل Image با شناسه mychart که در فرم خود قرار دادیم نمایش دهیم :
HttpContext ctx = HttpContext.Current;
string chartID = Guid.NewGuid().ToString();
ctx.Session[chartID] = byteArr;
mychart.ImageUrl = string.Concat("chart.ashx?", chartID); |
توجه :
در صورتی که مجموعه نرم افزار Microsoft Office را نصب کرده اید Microsoft Office 11.0 Object Library در دسترس شما خواهد بود. در غیر اینصورت OWC را می توانید از سایت مایکروسافت دانلود کنید : لینک مستقیم دانلود
بعد از نصب OWC جهت مطالعه راهنمای آن می توانید به فایل OWCDCH11.CHM واقع در آدرس زیر مراجعه کنید :
| \Program Files\Common Files\Microsoft Shared\Web Components\11\1033 |
چند نکته :
1 - از آنجا که هر نمودار آماری حداقل دارای دو بخش است که در محور های x , y نمایش داده می شوند ، من از دو آرایه برای این مقادیر استفاده کردم.
string[] chartCategoriesArr = new string[] {"Alireza", "Ahmad",
"Sasan", "Hamed", "Amir"};
string[] chartValuesArr = new string[] { "18", "20", "19", "12", "16" }; |
2 - کلاس ChartSpaceClass بالاترین سطح کاری ماست و به بیان ساده تر ظرفی برای نگهداری نمودارهاست. بعد از اولین ایجاد شیء از این کلاس، محیط کاری ما خالی است و باید با استفاده از متد Add نمودار های مورد نظر را به آن افزود :
ChartSpaceClass oChartSpace = new ChartSpaceClass();
//-- تنظیمات
oChartSpace.Charts.Add(0); |
3 - کلاس ChartSpaceClass شامل 67 نوع مختلف از نمودار ها و چارت های آماری (مانند میله ای، دایره ای، خطی، منحنی، دوبعدی، سه بعدی، حبابی و ...) می باشد که با مقدار دهی به خاصیت ChartChartTypeEnum در دسترس هستند :
| chartType = ChartChartTypeEnum.chChartTypeColumn3D; |
4 - به استفاده از متد Join کلاس String توجه کنید :
string chartCategoriesStr = String.Join ("\t", chartCategoriesArr);
string chartValuesStr = String.Join ("\t", chartValuesArr); |
OWC این فرمت از مقادیر را می شناسد! می توانستیم t\ را در حین مقدار دهی به آرایه در نظر بگیریم.
دانلود فایل ضمیمه | دریافت کد
همه مقالات
کلیات Asp.Net
را ببینید.
|
|