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

חסר ערך

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

  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:["columnchart"]});
      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.ColumnChart(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 הוא "columnchart" 

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

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

  var visualization = new google.visualization.ColumnChart(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.
צבעים מערך של מחרוזות או עצמים צבעי ברירת מחדל

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

  • אם הערך שלו הוא 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, מוצג שינוי תלת-ממדי.
isStacked boolean false אם המדיניות מוגדרת כ-True, ערכי השורות מוערםים (נצברים).
מקרא string 'ימינה' המיקום והסוג של המקרא. יכול להיות אחת מהאפשרויות הבאות:
  • 'ימין' – מימין לתרשים.
  • 'left' - משמאל לתרשים.
  • 'ראש הדף' – מעל התרשים.
  • 'bottom' – מתחת לתרשים.
  • 'ללא' – לא מוצג מקרא.
legendBackgroundColor מחרוזת או אובייקט צבע ברירת המחדל צבע הרקע של האזור המקרא של התרשים. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
legendFontSize number אוטומטי גודל הגופן של המקרא, בפיקסלים.
legendTextColor מחרוזת או אובייקט צבע ברירת המחדל הצבע של רשומות הטקסט במקרא. הערכים האפשריים הם כמו אלה של אפשרות ההגדרה backgroundColor.
logScale boolean false אם True, יש להתאים את הציר הראשי באופן לוגריתמי.
מקסימלי number אוטומטי מציינת את קו הרשת הגבוה ביותר של ציר ה-Y. קו הרשת בפועל יהיה הערך הגבוה מבין שני הערכים: הערך המקסימלי של האפשרות או ערך הנתונים הגבוה ביותר, יעוגל כלפי מעלה עד לסימן הרשת הבא.
דקה number אוטומטי מציינת את קו הרשת הנמוך ביותר של ציר ה-Y. קו הרשת בפועל יהיה הערך הנמוך מבין שני הערכים: הערך המינימלי של האפשרות, או ערך הנתונים הנמוך ביותר, יעוגל כלפי מטה עד לסימן הרשת התחתון הבא .
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(). אין

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

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