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

הוצא משימוש

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

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

סקירה כללית

תרשים עמודות אופקי שעובר רינדור בדפדפן באמצעות 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:["barchart"]});
      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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

בטעינה

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

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

שם הכיתה הוא google.visualization.BarChart 

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

פורמט נתונים

כל שורה בטבלה מייצגת קבוצה של עמודות סמוכות.

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

הערך בשורה ובעמודה מסוימים קובע את הגובה של העמודה הספציפית המיוצגת על ידי השורה והעמודה.

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

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

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

שיטות

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

אירועים

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

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

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