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

חסר ערך

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

סקירה כללית

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

מאת: Google

דוגמה

כתיבת קוד בעצמכם במגרש המשחקים של הוויזואליזציה

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

בטעינה

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

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

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

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

פורמט נתונים

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

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

שם סוג ברירת המחדל תיאור
axisColor מחרוזת או אובייקט צבע ברירת המחדל הצבע של הציר. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
axisBackgroundColor מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרקע של הציר. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
axisFontSize number אוטומטי גודל הגופן של הטקסט בציר התרשים, בפיקסלים.
backgroundColor מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור הראשי בתרשים. יכולה להיות אחת מהאפשרויות הבאות:
  • מחרוזת עם צבע שנתמך על ידי HTML, לדוגמה 'אדום' או '#00cc00'
  • אובייקט עם המאפיינים stroke fill ו-strokeSize. stroke ו-fill צריכים להיות מחרוזת עם צבע. streamSize הוא מספר. לדוגמה: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. כדי להשתמש רק במילוי, ללא קו חוצה, יש להשתמש ב-stroke:null, strokeSize: 0.
borderColor מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרכיבי תרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
צבעים מערך של מחרוזות צבעי ברירת מחדל הצבעים של הרכיבים בתרשים. מערך של מחרוזות. כל רכיב הוא מחרוזת שהיא צבע שנתמך על ידי HTML, לדוגמה 'red' או '#00cc00'.
enableTooltip boolean true אם המדיניות מוגדרת כ-True, מוצגים הסברים קצרים כשהמשתמש לוחץ על נקודה על הגרף.
focusBorderColor מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרכיבי תרשים שנמצאים במוקד (הצבעה באמצעות העכבר). הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
isStacked boolean false אם המדיניות מוגדרת כ-True, ערכי השורות מוערםים (נצברים).
מקרא string 'ימינה' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'ימין' – מימין לתרשים.
  • 'left' - משמאל לתרשים.
  • 'ראש הדף' – מעל התרשים.
  • 'bottom' – מתחת לתרשים.
  • 'ללא' – לא מוצג מקרא.
legendBackgroundColor מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור המקרא של התרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
legendFontSize number אוטומטי גודל הגופן של המקרא, בפיקסלים.
legendTextColor מחרוזת או אובייקט צבע ברירת המחדל צבע הטקסט של המקרא. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
lineSize number 2 רוחב הקו בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הקווים ולהציג רק את הנקודות.
logScale boolean false אם True, יש להתאים את הציר הראשי באופן לוגריתמי.
מקסימלי number אוטומטי מציינת את קו הרשת הגבוה ביותר של ציר ה-Y. קו הרשת בפועל יהיה הערך הגבוה מבין שני הערכים: הערך המקסימלי של האפשרות או ערך הנתונים הגבוה ביותר, יעוגל כלפי מעלה עד לסימן הרשת הבא.
דקה number אוטומטי מציינת את קו הרשת הנמוך ביותר של ציר ה-Y. קו הרשת בפועל יהיה הערך הנמוך מבין שני הערכים: הערך של האפשרות המינימלית או ערך הנתונים הנמוך ביותר, יעוגל למטה עד לסימן הרשת התחתון הבא.
pointSize number 3 גודל הנקודות המוצגות בפיקסלים. יש להשתמש באפס כדי להסתיר את כל הנקודות.
reverseAxis boolean false אם המדיניות מוגדרת כ-True, קטגוריות יימשכו מימין לשמאל. ברירת המחדל היא לצייר משמאל לימין.
showCategories boolean true אם הערך הוא True, יוצגו תוויות של קטגוריות. אם הערך הוא False, לא.
title string ללא שם טקסט להצגה מעל התרשים.
titleX string ללא שם טקסט להצגה מתחת לציר האופקי.
titleY 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(). אין

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

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