آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش ASP.Net به زبان ساده     >     آموزش مدل صفحات وب WP  
درس پانزدهم : کار با کمک دهنده رسم نمودار Chart Helper در صفحات وب ASP.Net در ASP.Net Web Pages

مقدمه :

در درس های قبلی با نحوه کار با کمک دهنده های ASP.Net از جمله کمک دهنده های جدول وار اطلاعات و یا کمک دهنده ارسال ایمیل آشنا شدید .
در این درس قصد داریم تا شما را با کمک دهنده رسم نمودار یا Chart Helper آشنا کنیم . از این کمک دهنده می توانید برای رسم انواع نمودارهای حطی و گرافیکی جهت نمایش اطلاعات خود استفاده کنید . این کمک دهنده می تواند انواع نمودارهای تصویری را همراه با قالب بندی های متفاوت و اضافه کردن متن ( Labels ) ایجاد کند . از جمله نمودارهای قابل تولید توسط این کمک دهنده می توان به نمودارهای ستونی ، میله ای ، دایره ای ، خطی و ... به همراه تنظیمات اختصاصی اشاره کرد .
تصویرهای زیر برخی از نمودارهای ایجاد شده توسط کمک دهنده رسم نمودار Chart Helper را نشان می دهد . اطلاعاتی که برای نمایش در این نمودارها استفاده می کنید ، می تواند از سوی یک آرایه ، یک پایگاه داده و یا یک فایل داده ای نظیر XML تعیین شود . در ادامه به بررسی حالت های مختلف کار با این کمک دهنده خواهیم پرداخت .

آموزش نمایش اطلاعات به صورت نمودار در صفحات ASP.Net آموزش نمایش اطلاعات به صورت نمودار در صفحات ASP.Net

رسم نمودار بر پایه اطلاعات یک آرایه :

کد زیر نحوه تولید یک نمودار را بر اساس اطلاعات یک شی آرایه ای نشان می دهد . به کد مثال دقت کنید ، سپس به توضیح هر یک از بخش های کد خواهیم پرداخت :

کد @{
        var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Employees")
        .AddSeries(chartType: "column",
        xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
        yValues: new[] { "2", "6", "4", "5", "3" })
        .Write( );
}
کد آموزش نمایش اطلاعات به صورت نمودار در صفحات ASP.Net
  • new chart : در خط اول ، توسط متد ( ) chart ، یک شی جدید از نوع نمودار را با نام myChart ، با ارتفاع و عرض مشخص ایجاد کرده ایم .
  • خاصیت AddTitle : توسط این خاصیت یک عنوان برای نمودار تعیین شده است .
  • متد AddSeries : این متد اطلاعات مورد نظر را به نمودار اضافه خواهد کرد .
  • پارامتر ChartType : تعیین کننده نوع نمودار بوده که در اینجا ستونی تعیین شده است .
  • پارامتر : xVAlue : این پارامتر مقادیر و نام های موجود در ردیف افقی نمودار ( محور x ) را تعیین می کند ، که در این مثال نام اشخاص است .
  • پارامتر yValue : این پارامتر مقادیر ستون ها یا ردیف های عمودی ( محور y ) را تعیین می کند که در این مثال اعداد مربوط به هر شخص است .
  • متد ( ) Write : در نهایت نیز متد ( ) Write باعث رسم نمودار و تولید خروجی آن بر روی صفحه می شود .

همانطور که در خروجی نمودار مشاهده می کنید ، این نمودار اطلاعات آماری مربوط به چند شخص را به صورت ستونی نمایش می دهد .

نمایش اطلاعات یک پایگاه داده توسط نمودار در صفحات وب ASP.Net :

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

کد @{
        var db = Database.Open("SmallBakery");
        var dbdata = db.Query("SELECT Name, Price FROM Product");
        var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: dbdata, xField: "Name")
        .Write( );
  }
کد آموزش نمایش اطلاعات به صورت نمودار در صفحات ASP.Net
  • ( ) var db = Database.Open : این متد پایگاه داده که نام آن در پرانتز مقابلش تعیین شده را باز کرده و اطلاعات آن را در متغیر db قرار می دهد .
  • ( ) var dbdata = db.QueryString : این کد یک دستور Select برای انتخاب داده  که در پرانتز جلوب آن تعیین می شود ، را اجرا کرده و سپس نتایج حاصله را در متغیر dbdata ذخیره می کند .
  • ( ) new chart : همانند مثال قبل ، توسط این متد یک نمودار جدید به نام myChart را ایجاد کرده و طول و عرض آن را مشخص می کنیم .
  • AddTitle : این خاصیت عنوان یا هدر نمودار را تعیین می کند .
  • متد ( ) DataBindTable : این متد متغیر داده ای را به نمودار متصل کرده و اطلاعات را درون آن قرار می دهد .
  • متد ( )Write : در نهایت نیز متد ( )Write باعث ایجاد نمودار و نمایش خروجی آن بر روی صفحه می شود .

* نکته : گزینه دیگر به جای استفاده از متد ( ) DataBindTable استفاده از متد ( )AddSeries همانند مثال قبل است . اما ( ) DataBindTable برای استفاده راحت تر بوده ، در حالی که متد ( )AddSeries به دلیل امکان تعین دقیق تر نوع داده ، انعطاف پذیر تر می باشد . نمونه کد تغییر یافته یا این متد به صورت زیر خواهد بود :

کد @{
       var db = Database.Open("SmallBakery");
       var dbdata = db.Query("SELECT Name, Price FROM Product");
       var myChart = new Chart(width: 600, height: 400)
            .AddTitle("Product Sales")
           .AddSeries(chartType:"Pie",
            xValue: dbdata, xField: "Name",
            yValues: dbdata, yFields: "Price")

       .Write( );
}

نمایش اطلاعات یک فایل XML توسط نمودار در ASP.Net :

گزینه دیگر نمایش اطلاعات یک فایل XML توسط نمودار در صفحات وب ASP.Net است . برای این منظور بایستی ابتدا به فایل XML متصل شده ، آن را خوانده و سپس درون نمودار وارد کنید . کد زیر نشان دهنده نحوه اتصال به یک فایل XML است :

کد @using System.Data;

@{
      var dataSet = new DataSet( );
      dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
      dataSet.ReadXml(Server.MapPath("data.xml"));
      var dataView = new DataView(dataSet.Tables[0]);
      var myChart = new Chart(width: 600, height: 400)
      .AddTitle("Sales Per Employee")
      .AddSeries("Default", chartType: "Pie",
         xValue: dataView, xField: "Name",
         yValues: dataView, yFields: "Sales")

      .Write();
    }
}
کد آموزش نمایش اطلاعات به صورت نمودار در صفحات ASP.Net

توضیح کد مثال :

در خط اول کد ، یک متغیر داده ای از نوع DataSet تعریف کرده ایم که در خط بعدی توسط متد ReadXmlSchema قالب مورد نظر برای دسته بندی اطلاعات فایل XML را می خواند .
در خط سوم نیز متغیر dataset توسط متد ReadXML خود فایل XML را خوانده و اطلاعات آن را ذخیره می کند .
در خط چهارم نیز یک شی dataView ایجاد کرده ایم که اطلاعات اولین جدول از اطلاعات شی DataSet را می خواند .
سپس توسط متد ( ) Chart و تعیین خواص و پارامترهای مربوطه ، نمودار که از نوع دایره ای ( pie ) می باشد ، را ایجاد کرده و نمایش داده ایم .



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1