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

הוצא משימוש

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

סקירה כללית

תרשים שטח שעובר רינדור בדפדפן באמצעות 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);

פורמט נתונים

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

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

שם סוג ברירת מחדל תיאור
צבע הציר מחרוזת או אובייקט צבע ברירת המחדל צבע הציר. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
ציר רקעצבע מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרקע של הציר. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
גודלציר הציר number אוטומטי גודל הגופן של הטקסט בציר הפיקסלים, בפיקסלים.
רקע מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור הראשי בתרשים. יכול להיות אחת מהאפשרויות הבאות:
  • מחרוזת בעלת צבע שנתמך על ידי HTML, לדוגמה 'אדום' או '#00cc00'
  • אובייקט עם מאפיינים stroke fill ו-strokeSize. המחרוזת stroke והמחרוזת fill צריכות להיות מחרוזת בצבע. stringSize הוא מספר. לדוגמה: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. כדי להשתמש רק במילוי, יש להשתמש בקוד stroke:null, strokeSize: 0.
גבול צבע מחרוזת או אובייקט צבע ברירת המחדל הגבול מסביב לרכיבי התרשים. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
צבעים מערך מחרוזות צבעי ברירת מחדל הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות. כל רכיב הוא מחרוזת בעלת צבע הנתמך על ידי HTML, לדוגמה 'אדום' או '#00cc00'.
enableToolTip boolean נכון אם היא מוגדרת כ-true, ההסברים הקצרים מוצגים כשהמשתמש לוחץ על נקודת נתונים.
FocusBorderColor מחרוזת או אובייקט צבע ברירת המחדל הגבול שמסביב לרכיבי התרשים שנמצאים במוקד (עם העכבר). הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
גובה number גובה הקונטיינר גובה התרשים בפיקסלים.
בערימה boolean לא נכון אם המדיניות מוגדרת כ-True, ערכי השורות מופיעים בערימה (מצטבר).
מקרא string 'right' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'right' - משמאל לתרשים.
  • משמאל - משמאל לתרשים.
  • 'top' (למעלה) – מעל לתרשים.
  • 'bottom' (תחתית) – מתחת לתרשים.
  • 'none' - לא מוצג מקרא.
צבע רקע של מקרא מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של אזור המקרא בתרשים. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
גודל מקרא של גופן number אוטומטי הגודל של גופן המקרא, בפיקסלים.
צבע מקרא מחרוזת או אובייקט צבע ברירת המחדל צבע הטקסט במקרא. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
גודל השורה number 2 רוחב השורה בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הקווים ולהציג רק את הנקודות.
לוגריתמי boolean לא נכון אם True, יש לשנות את הציר הלוגריתמי של הציר הראשי.
מקסימלי number אוטומטי קביעת קו הרשת של ציר Y הגבוה ביותר. קו הרשת בפועל יהיה גדול משני ערכים: הערך המקסימלי של האפשרות או הערך הגבוה ביותר של הנתונים, יעוגל למעלה לסימן הרשת הבא.
דק' number אוטומטי מפרט את קו הרשת הנמוך ביותר של ציר Y. קו הרשת בפועל יהיה הערך התחתון מבין שני ערכים: הערך המינימלי של האפשרות או הערך הנמוך ביותר של נתונים, יעוגל כלפי מטה לסימן הרשת התחתון הבא.
גודל גודל number 3 גודל הנקודות המוצגות בפיקסלים. אפשר להשתמש באפס כדי להסתיר את כל הנקודות.
היפוך ציר boolean לא נכון אם המדיניות מוגדרת כ-True, היא תמשוך קטגוריות מימין לשמאל. הגדרת ברירת המחדל היא ציור משמאל לימין.
קטגוריות boolean נכון אם True, תוצג תווית של קטגוריה. אם False, לא.
שם פריט string ללא שם טקסט להצגה מעל לתרשים.
כותרתX string ללא שם טקסט להצגה מתחת לציר האופקי.
titleY string ללא שם טקסט להצגה לפי הציר האנכי.
צבע מחרוזת או אובייקט צבע ברירת המחדל הצבע עבור כותרת התרשים. הערכים האפשריים זהים לאלה של אפשרות ההגדרה backgroundColor.
גודל גופן number אוטומטי גודל הגופן של כותרת התרשים, בפיקסלים.

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

שיטות

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

אירועים

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

מדיניות נתונים

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