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

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

מה תלמד:

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

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

• Chart helper

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

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

רכיבי התרשים

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

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

הנתונים שאתה מציג בתרשים יכולים להגיע ממערך, ממסד נתונים, או מקובץ 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. הפעל את הדף בדפדפן.

    

   

    

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

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

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 >="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"
       >:mstns="http://tempuri.org/data.xsd"
       >="http://tempuri.org/data.xsd"
       >:xs="http://www.w3.org/2001/XMLSchema"
       >: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. הפעל את הדף בדפדפן.
   
   

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

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

השלב הראשון הוא ליצור דף שיוצר את התרשים, כפי שראית כבר.

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

   

עיצוב תרשים

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

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

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

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. הפעל את הדף בדפדפן. אתה רואה את הנתונים בדיוק כמו קודם, אבל התרשים נראה מלוטש יותר: