וובמאסטר - תיכנות ובניית אתרים

מדריך CSHTML - עבודה עם נתונים: הצגת נתונים בתרשים

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 4 פברואר, 2011
F+
F-

מאמר זה מסביר כיצד להציג נתונים בתרשים.

מה תלמד:

  • איך להציג נתונים בתרשים.
  • כיצד לעצב תרשימים באמצעות תבניות מובנות.

במאמר זה נציג את העוזר (Helper) הבא:

  • Chart helper

 

Chart Helper (עוזר התרשים)

כאשר ברצונך להציג את הנתונים בצורה גרפית, אתה יכול להשתמש בעוזר Chart. Chart יכול לעבד תמונה המציגה נתונים במגוון רחב של סוגי תרשימים. הוא תומך באפשרויות רבות עבור עיצוב וסימון. Chart יכול לעבד יותר מ- 30 סוגים של תרשימים, כולל כל סוגי התרשימים שאתה עשוי להכיר מ-Microsoft Excel או מכלים אחרים - תרשימי שטח, תרשימים טורים, תרשימי עמודות, תרשימי קו, תרשימי עוגה, יחד עם עוד תרשימים מיוחדים, כמו תרשימי מניות.

תרשים שטח (Area)

chart helper - Area

תרשים עמודות (Bar)

chart helper - Bar

תרשים טורים (Column)

chart helper - Column

תרשים קו (Line)

chart helper - Line

תרשים עוגה (Pie)

chart helper - Pie

תרשים מניות (Stock)

chart helper - Stock

רכיבי התרשים

תרשימים מציגים נתונים ואלמנטים נוספים כמו מקרא, צירים, סדרות וכן הלאה. התמונה הבאה מראה אלמנטים רבים של התרשים שניתן להתאים אישית בעת שימוש בעוזר Chart.

chart helper

יצירת תרשים מתוך נתונים

הנתונים שאתה מציג בתרשים יכולים להגיע ממערך, ממסד נתונים, או מקובץ XML.

שימוש במערך (Array)

הליך זה מדגים כיצד ניתן ליצור תרשים ממערך של נתונים, באמצעות סוג התרשים המוגדר כברירת מחדל. נראה גם כיצד להציג את התרשים בתוך הדף.

  1. צור קובץ חדש בשם ChartArrayBasic.cshtml.
  2. החלף את הקוד הקיים בקוד הבא:

     

    @{
      var key = new Chart(width: 600, height: 400)
      .AddTitle("Chart Title")
      .AddSeries(
         name: "Employee",
         xValue: new[] {"Peter","Andrew","Julie","Mary","Dave"},
         yValues: new[] { "2", "6", "4", "5", "3" })
      .Write();
    }

     

    הקוד יוצר תרשים חדש וקובע את רוחבו וגובהו. לאחר מכן השתמשנו בשלושת הפונקציות הבאות:

    · AddTitle- לציין כותרת לתרשים.

    · AddSeries - כדי להוסיף סדרת נתונים, לפונקציה הזנו 3 פרמטרים:

    • name - השם שיופיע במקרא.
    • xValue - הנתונים בציר ה- X (הציר האופקי)
    • yValues – הנתונים בציר ה- Y(הציר האנכי).

    · Write – להצגת התרשים. לא ציינו את סוגו ולכן הוא יוצג כברירת מחדל כתרשים טורים אנכיים.

     

  3. הפעל את הדף בדפדפן.

     

    chart helper from Data

     

שימוש בשאילתת מסד נתונים עבור תרשים

אם הנתונים לתרשים נמצאים במסד נתונים, אתה יכול להריץ שאילתת מסד נתונים ולאחר מכן לאגד נתונים נבחרים מן התוצאות של השאילתה. הליך זה מראה לך כיצד לקרוא ולהציג את הנתונים שיצרת בדוגמה הקודמת.

  1. הוסף את התיקייה App_Data לשורש של האתר, במידה והתיקייה אינה קיימת כבר.
  2. בתיקיה App_Data, הוסף את קובץ מסד הנתונים בשם SmallBakery.sdf שיצרת בדוגמא בפרק "עבודה עם נתונים".
  3. צור קובץ חדש בשם ChartDataQuery.cshtml.
  4. החלף את הקוד הקיים עם הקוד הבא:
    @{
      var db = Database.Open("SmallBakery");
      var data = db.Query("SELECT Name, Price FROM Product");
      var key = new Chart(width: 600, height: 400)
          .AddTitle("Product Sales")
          .DataBindTable(dataSource: data, xField: "Name")
          .Write();
    }


    הקוד פותח את מסד הנתונים SmallBakery ומקצה אותו למשתנה בשם db . משתנה זה מייצג אובייקט Database שניתן להשתמש בו כדי לקרוא ולכתוב במסד הנתונים. לאחר מכן, הקוד מפעיל שאילתת SQL כדי לקבל את השם ואת המחיר של כל מוצר. הקוד יוצר תרשים חדש, ומזין את שאילתת מסד נתונים זה על ידי קריאה לפונקציה DataBindTable של התרשים. שיטה זו מקבלת שני פרמטרים. dataSource הוא הפרמטר עבור הנתונים מהשאילתא, והפרמטר xField המאפשר להגדיר איזו עמודת נתונים משמשת עבור ציר ה- x של התרשים.

    כאלטרנטיבה לשימוש בפונקציה DataBindTable, אתה יכול להשתמש בפונקציה AddSeries של Chart. פונקציה זו מאפשרת לך להגדיר את הפרמטרים xValue ו- yValues. לדוגמה, במקום להשתמש בפונקציה DataBindTable כמו זו:

    .DataBindTable(data, "Name")

    ניתן להשתמש בפונקציה AddSeries כמו זו:

     

    .AddSeries("Default", xValue: data, xField: "Name",
        yValues: data, yFields: "Price")


    התוצאות מוצגות באופן זהה. הפונקציה AddSeries גמישה יותר, כי אתה יכול לציין את סוג התרשים ואת הנתונים באופן מפורש יותר. לעומתה, הפונקציה DataBindTable קלה יותר לשימוש, במידה ואתה לא צריך את הגמישות הנוספת.

  5. הפעל את הדף בדפדפן.

שימוש בנתוני XML

האפשרות השלישית ליצירת תרשים היא להשתמש בקובץ XML עבור נתוני התרשים. זה מחייב שלקובץ ה-XML יהיה גם קובץ סכימה (קובץ XSD) המתאר את מבנה ה- XML. הליך זה מראה לך איך לקרוא נתונים מקובץ XML.

  1. בתיקייה App_Data, צור קובץ XML חדש בשם data.xml.
  2. כתוב את קוד ה-XML הבא אשר מציג נתונים על עובדים בחברה כלשהי:

    <?xml version="1.0" standalone="yes" ?>
    <
    newdataset xmlns="http://tempuri.org/data.xsd">
        <Employee>
            <Name>Erin</Name>
            <Sales>10440</Sales>
        </Employee>
        <Employee>
            <Name>Kim</Name>
            <Sales>17772</Sales>
        </Employee>
        <Employee>
            <Name>Dean</Name>
            <Sales>23880</Sales>
        </Employee>
        <Employee>
            <Name>David</Name>
            <Sales>7663</Sales>
        </Employee>
        <Employee>
            <Name>Sanjay</Name>
            <Sales>21773</Sales>
        </Employee>
        <Employee>
            <Name>Michelle</Name>
            <Sales>32294</Sales>
        </Employee
    >
    </
    newdataset
    >

  3. בתיקייה App_Data, צור קובץ XML חדש בשם data.xsd. (שים לב כי הפעם הסיומת היא XSD).
  4. כתוב את קוד ה- XML הבא:
    <?xml version="1.0" ?>
    <
    xs:schema
        id="NewDataSet"
        targetNamespace="http://tempuri.org/data.xsd"
        xmlns:mstns="http://tempuri.org/data.xsd"
        xmlns="http://tempuri.org/data.xsd"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"
        attributeFormDefault="qualified"
        elementFormDefault="qualified">
        <xs:element name="NewDataSet"
            msdata:IsDataSet="true"
            msdata:EnforceConstraints="False">
            <xs:complexType>
                <xs:choice maxOccurs="unbounded">
                    <xs:element name="Employee">
                        <xs:complexType>
                            <xs:sequence>
                                <xs:element
                                    name="Name"
                                    type="xs:string"
                                    minOccurs="0" />
                                <xs:element
                                    name="Sales"
                                    type="xs:double"
                                    minOccurs="0" />
                            </xs:sequence>
                        </xs:complexType>
                    </xs:element>
                </xs:choice>
            </xs:complexType>
        </xs:element
    >
    </
    xs:schema
    >

  5. בתיקיית השורש של האתר, צור קובץ חדש בשם ChartDataXML.cshtml.
  6. החלף את הקוד הקיים עם הקוד הבא:
    @using System.Data;
    @{
      var dataSet = new DataSet();
      dataSet.ReadXmlSchema(Server.MapPath("/App_Data/data.xsd"));
      dataSet.ReadXml(Server.MapPath("/App_Data/data.xml"));
      var dataView = new DataView(dataSet.Tables[0]);

      var key = new Chart(width: 600, height: 400)
          .AddTitle("Sales Per Employee")
          .AddSeries("Default", chartType: "Pie",
              xValue: dataView, xField: "Name",
              yValues: dataView, yFields: "Sales")
          .Write();
    }

    הקוד יוצר אובייקט DataSet חדש. אובייקט זה משמש כדי לנהל את הנתונים שנקראו מקובץ ה- XML ולארגן אותו על פי המידע בקובץ הסכימה. (שימו לב כי בחלק העליון של הקוד קיימת ההצהרה using System.Data . היא נדרשת כדי לאפשר עבודה עם אובייקט DataSet).

    לאחר מכן, הקוד יוצר אובייקט DataView המבוסס על בסיס הנתונים. ה- DataView מספק אובייקט שהתרשים יכול להתחבר אליו. התרשים נקשר אל הנתונים באמצעות הפונקציה AddSeries, כפי שראית קודם (בתרשים מנתוני מערך) אלא שהפעם הפרמטרים xValue ו- yValues מוגדרים לאובייקט DataView.

    דוגמה זו גם מראה לך כיצד להגדיר סוג תרשים מסוים. כאשר הנתונים מתווספים בפונקציה AddSeries, הפרמטר chartType מוגדר להציג תרשים עוגה.

  7. הפעל את הדף בדפדפן.
    chart helper DataView

 

הצגת תרשימים בתוך דף אינטרנט

בדוגמאות שראית עד כה, אתה יוצר תרשים ולאחר מכן התרשים מוצג ישירות בדפדפן כגרפיקה. במקרים רבים, ברצונך להציג תרשים כחלק מדף, ולא דף עם תרשים בלבד. כדי לעשות זאת יש צורך בתהליך של שני שלבים.

השלב הראשון הוא ליצור דף שיוצר את התרשים, כפי שראית כבר.
השלב השני הוא להציג את תמונת הפלט בדף אחר. כדי להציג את התמונה, אתה משתמש בתגית <img> בדיוק באותו אופן בו אתה מציג תמונה כלשהי. עם זאת, במקום להפנות לקובץ jpg. או .png, התגית <img> תפנה לקובץ cshtml המכיל את Chart Helper היוצר את התרשים. כאשר הדף המוצג רץ, התגית <img> מקבלת את הפלט של Chart Helper ומציגה את התרשים.

chart helper דיאגרמה

  1. צור קובץ בשם ShowChart.cshtml.
  2. החלף את הקוד הקיים עם הקוד הבא:

    <!DOCTYPE html>
    <
    html>
      <head>
        <title>Chart Example</title>
      </head>
      <body>
        <h1>Chart Example</h1>
        <p>The following chart is generated by the
        <em>ChartArrayBasic.cshtml</em>
          file, but is shown in this page.</p>
        <p><img src="ChartArrayBasic.cshtml" /> </p>
      </body
    >
    </
    html
    >
  3. הקוד משתמש בתגית <img> כדי להציג את התרשים שיצרת קודם לכן בקובץ ChartArrayBasic.cshtml.
  4. הפעל את דף האינטרנט בדפדפן. הקובץ ShowChart.cshtml מציג את התרשים כתמונה המבוססת על קוד הכלול בקובץ ChartArrayBasic.cshtml.


    chart helper Array

עיצוב תרשים

Helper Chart תומך במספר רב של אפשרויות המאפשרות לך להתאים אישית את המראה של התרשים. ניתן להגדיר צבעים, גופנים, גבולות, וכן הלאה. דרך קלה כדי להתאים אישית את המראה של התרשים היא להשתמש בערכת נושא (theme). ערכות נושא הם אוסף של פרטים המציינים כיצד להציג את התרשים באמצעות גופנים, צבעים, לוחות צבעים, תוויות, גבולות ואפקטים.

הטבלה הבאה מפרטת את ערכות הנושא הקיימות כבר באופן מובנה:

ערכת הנושא

תיאור

Vanilla

הצגת עמודות אדומות על רקע לבן.

Blue

הצגת עמודות כחולות על רקע צבע כחול הדרגתי.

Green

הצגת עמודות כחולות על רקע צבע ירוק הדרגתי.

Yellow

הצגת עמודות כתומות על רקע צבע צהוב.

Vanilla3D

הצגת עמודות תלת-מימדיות אדומות על רקע לבן.

ניתן לציין את ערכת הנושא לשימוש כאשר אתה יוצר תרשים חדש.

  1. צור קובץ חדש בשם ChartStyleGreen.cshtml.
  2. החלף את הקוד הקיים בדף עם הקוד הבא:
    @{
      var db = Database.Open("SmallBakery");
      var data = db.Query("SELECT Name, Price FROM Product");
      var key = new Chart(width: 600,
                          height: 400,
                          theme: ChartTheme.Green)
          .AddTitle("Product Sales")
          .DataBindTable(data, "Name")
          .Write();
    }
    קוד זה הוא זהה לדוגמה שכבר עשינו המשתמשת במסד נתונים, אך מוסיפה את הפרמטר theme ביצירת התרשים. זהו הקוד שונה:
    @{
    var key = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
    }

  3. הפעל את הדף בדפדפן. אתה רואה את הנתונים בדיוק כמו קודם, אבל התרשים נראה מלוטש יותר:

    chart helper Theme

    ליאור זמיר, ג'ון ברייס הדרכה

    כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
    לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
    תגיות: ASP.NET‏  /  CSHTML‏  

    תגובות בפייסבוק

    תגובות למאמר



    עוד במדריך

    תגיות פופולאריות

    X
    הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
    וובמאסטר © כל הזכויות שמורות