תצוגה חזותית: תרשים עוגה (גרסה ישנה)

חסר ערך

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

  1. סקירה כללית
  2. דוגמה
  3. בטעינה
  4. פורמט נתונים
  5. אפשרויות הגדרה
  6. שיטות
  7. אירועים
  8. המדיניות בנושא נתונים

סקירה כללית

תרשים עוגה שמעובד בתוך הדפדפן באמצעות SVG או VML. הצגת טיפים כשלוחצים על פרוסות. יוצרת אנימציה של פרוסות כשלוחצים על רשומות מקרא.

מאת: Google

דוגמה

כתיבת קוד בעצמך ב-Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

בטעינה

שם החבילה של google.load הוא "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

שם הכיתה של התרשים להמחשה הוא google.visualization.PieChart 

  var visualization = new google.visualization.PieChart(container);

פורמט נתונים

שתי עמודות. העמודה הראשונה צריכה להיות מחרוזת ולהכיל את תווית הפלח. העמודה השנייה צריכה להיות מספר ולהכיל את ערך הפלח.

אפשרויות הגדרה

שם סוג ברירת המחדל תיאור
backgroundColor מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור הראשי בתרשים. אחת מהאפשרויות הבאות:
  • מחרוזת עם צבע שנתמך על ידי HTML, לדוגמה 'red' או '#00cc00', או
  • תיאור של אובייקט n עם המאפיינים הבאים:
    • stroke - מחרוזת של צבע HTML שמתארת את צבע הגבול של התרשים.
    • fill - מחרוזת של צבע HTML שמתארת את צבע הרקע של התרשים.
    • strokeSize - מספר שמתאר את העובי, בפיקסלים, של גבול התרשים. אם אין גבול, ניתן להגדיר את הערך 0.
      לדוגמה: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרכיבי תרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
צבעים מערך של מחרוזות או עצמים צבעי ברירת מחדל

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

  • אם הערך שלו הוא is3D=false, זהו מערך של צבעי HTML. דוגמה: צבעים:['#00FF00','orange']
  • אם הערך הוא is3D=true, זהו מערך של צבעי HTML או אובייקטים מהסוג הזה: {color:face_color, darker:shade_color} כאשר color הוא צבע הפנים של הרכיב ו-darker הוא צבע ההצללה. עם זאת, אם תציינו צבע HTML לאובייקט תלת-ממדי, הצבע של הפנים והגוון יהיו באותו צבע, ואפקט התלת-ממד יצטמצם. לדוגמה: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true אם המדיניות מוגדרת כ-True, מוצגים הסברים קצרים כשהמשתמשים לוחצים על פרוסה.
focusBorderColor מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרכיבי תרשים שנמצאים במוקד (הצבעה באמצעות העכבר). הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
is3D boolean false אם המדיניות מוגדרת כ-True, מוצג תרשים תלת-ממדי.
מקרא string 'ימינה' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'ימין' – מימין לתרשים.
  • 'left' - משמאל לתרשים.
  • 'ראש הדף' – מעל התרשים.
  • 'bottom' – מתחת לתרשים.
  • 'תווית' – תוויות ליד פרוסות.
  • 'ללא' – לא מוצג מקרא.
legendBackgroundColor מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור המקרא של התרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
legendFontSize number אוטומטי גודל הגופן של המקרא, בפיקסלים.
legendTextColor מחרוזת או אובייקט צבע ברירת המחדל צבע הטקסט של המקרא. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
pieJoinAngle number 0 כל פרוסה שנמוכה מהזווית הזו תשולב לפרוסה גנרית עם התווית 'אחר'.
pieMinimalAngle number 0

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

כדי לחשב את גודל הפרוסות, הזוויות הראשונות קטנות מ-pieJoinAngle מחוברות לפרוסה 'Other', ואז כל הפרוסות שגדולות מ-pieMinimalAngle משורטטות
title string ללא שם טקסט להצגה מעל התרשים.
titleColor מחרוזת או אובייקט צבע ברירת המחדל הצבע של כותרת התרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
titleFontSize number אוטומטי גודל הגופן של כותרת התרשים, בפיקסלים.

tooltipFontSize		 number 11 גודל הגופן של טקסט ההסבר הקצר. הערך הזה עשוי להצטמצם אם ההסבר הקצר קטן מדי ולא יכול להכיל את הטקסט בגופן שצוין.
tooltipHeight
 number 60 הגובה של ההסבר הקצר, בפיקסלים. הגובה של ההסבר הקצר קבוע. הוא אף פעם לא יגדל או יתכווץ בהתאם לאורך או לגודל הגופן של הטקסט. עם זאת, כל דבר שגדול מ-1/3 מגובה התרשים ייחתך.
tooltipWidth number 120 רוחב ההסבר הקצר, בפיקסלים. הרוחב של ההסבר הקצר קבוע. הוא אף פעם לא יגדל או יתכווץ בהתאם לאורך או לגודל הגופן של הטקסט. עם זאת, כל דבר שגדול מרוחב התרשים ייחתך.
רוחב number רוחב הקונטיינר רוחב התרשים בפיקסלים.

שיטות

שיטה סוג הערך המוחזר תיאור
draw(data, options) אין מצייר את התרשים.
getSelection() מערך של רכיבי בחירה הטמעה רגילה של getSelection(). הרכיבים שנבחרו הם רכיבי שורה ותאים. המשתמש יכול לבחור כמה שורות או תא יחיד בבת אחת.
setSelection() אין הטמעה רגילה של setSelection(), אבל תומכת בבחירה של מספר שורות או תא אחד. כל רשומה שנבחרת נחשבת כשורה או כתא בחירה.

אירועים

שם תיאור תכונות
onmouseover מופעל כשהמשתמש מעביר את העכבר מעל פרוסה ועובר באינדקס של השורה והעמודה של התא המתאים. שורה, עמודה
onmouseout מופעל כשהמשתמש עובר עם העכבר מעל פרוסה ועובר באינדקס של השורה והעמודה של התא המתאים. שורה, עמודה
ready התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ולהשתמש בשיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את השיטה draw, ולקרוא למכשירים האלה רק אחרי שהאירוע הופעל אין
select

מופעל כשהמשתמש לוחץ על פרוסה או מקרא. כשבוחרים פרוסה, נבחר התא המתאים בטבלת הנתונים. כשבוחרים מקרא, נבחרת העמודה המתאימה בטבלת הנתונים. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר getSelection().

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

אין

המדיניות בנושא נתונים

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