תרשים להמחשה: תרשים תמונה גנרי

חשוב: החלק של 'תרשימי תמונות' בכלים של Google Charts הוצא משימוש באופן רשמי ב-20 באפריל 2012. הוא ימשיך לפעול בהתאם למדיניות ההוצאה משימוש שלנו.

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

סקירה כללית

תרשים התמונות הגנרי הוא wrapper גנרי לכל התרשימים שנוצרים על ידי Google Chart API. מומלץ לקרוא את מסמכי התיעוד של Chart API לפני שמנסים להשתמש בהדמיה הזו. הערה: אפשר לשלוח עד 16,000 נתונים באמצעות התצוגה החזותית הזו, בניגוד למגבלת 2,000 בקריאות ישירות ל-Chart API.

כל הנתונים מועברים לתרשימים באמצעות DataTable או DataView. בנוסף, חלק מהתוויות מועברות כעמודות בטבלת הנתונים.

כל שאר הפרמטרים של כתובות URL של Chart API (מלבד chd) מועברים כאפשרויות.

מאת: Google

דוגמאות

הנה דוגמאות לכמה סוגים שונים של תרשימים.

תרשים קו

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

תרשים עמודות אנכי

שימו לב שבתרשימי העמודות העטופות אין צורך לציין chxt='x' כפי שהייתם עושים אם קוראים לתרשים בעצמכם. אם לא מציינים ציר, 'תרשים תמונות כללי' ינסה להגדיר את התרשים כמו שצריך כברירת מחדל.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

תרשים עוגה

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

תרשים מכ"ם

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

תרשים מפה

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

בטעינה

שם החבילה ב-google.charts.load הוא 'imagechart'

  google.charts.load('current', {'packages': ['imagechart']});

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

  var visualization = new google.visualization.ImageChart(container_div);

פורמט נתונים

קיימים שני פורמטים של נתונים כלליים: אחד לתרשימי מפה ואחד לכל שאר התרשימים. חשוב לשים לב שהפורמט המספרי היחיד שנתמך לנתונים הוא סוג המספר JavaScript.

הערה: אסור לקודד כתובות URL ערכי מחרוזת שמועברים כנתונים או כאפשרויות.

תרשימי מפה

תרשים מפה מקבל טבלת נתונים שיש בה שתי עמודות נדרשות:

מידע נוסף זמין במאמרי העזרה של תרשים המפה.

תרשימים שלא קשורים למפות

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

  • עמודה ראשונה – [אופציונלי, מחרוזת] כל רשומה מייצגת תווית שבה משתמשים בציר ה-X (מקבילה לפרמטר chl או chxl) לתרשימים שתומכים בה.
  • העמודות הבאות – כל מספר של עמודות מספריות, שכל אחת מהן מייצגת סדרת נתונים.
  • עמודות אחרונות – [optional, string] כל מספר של עמודות מחרוזת אחרי עמודות הנתונים, כאשר כל רשומה מייצגת תווית של נקודות נתונים לתרשימים שתומכים בה. כדי להשתמש בעמודה הזו, צריך לציין את האפשרות annotationColumns.

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

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

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

האפשרויות הבאות מוגדרות להמחשה החזותית הזו. מגדירים אותן באובייקט האפשרויות שמועברות ל-method draw() של התצוגה החזותית. חלק מהאפשרויות הבאות לא נתמכות בכל סוגי התרשימים. תוכלו להיעזר במסמכי התיעוד של סוג התרשים עם התמונה הסטטית. אפשר להעביר כל פרמטר של כתובת URL של Chart API כאפשרות בחירה. לדוגמה, פרמטר כתובת ה-URL chg=50,50 מתצוגה חזותית של תרשים יצוין כך: options['chg'] = '50,50'.

הערה לגבי צבעים: אפשרויות צבעים כמו colors, color ו-backgroundColor מפורטות בפורמט הצבעים של Chart API. הפורמט הזה דומה לפורמט #RRGGBB אבל הוא כולל מספר הקסדצימלי רביעי אופציונלי כדי לציין שקיפות. אין תמיכה בצבעים קריאים לאנשים, כמו 'אדום', 'ירוק', 'כחול' וכו'. פורמט הצבעים של Chart API לא כולל את הסמל # המוביל, אבל אפשרויות התצוגה החזותיות של תרשים התמונות הגנריות יקבלו קודים של צבעים עם או בלי #.

שם סוג ברירת המחדל תיאור
annotationColumns Array<object> אין

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

לכל אובייקט במערך יש את המאפיינים הבאים:

  • column [מספר] – האינדקס מבוסס האפס של העמודה שמכילה את הטקסט שבו נעשה שימוש בהערה. אין צורך בערך בכל שורה בעמודה הזו.
  • positionColumn [מספר] – האינדקס מבוסס האפס של העמודה שמכילה את נקודת הנתונים שמסומנת בתווית. ברירת המחדל היא עמודת הנתונים הראשונה.
  • color [string] – הצבע של טקסט ההערה בפורמט הצבעים של Chart API. ברירת המחדל היא '#000000' (שחור).
  • size [מספר] – גודל הגופן של ההערה, בפיקסלים.
  • priority [string] – הערך 'low', 'medium' או 'high', שמציין את השכבה שאליה יש להוסיף את התווית. ערך ברירת המחדל הוא 'medium', שמציין שהתווית מצוירת אחרי עמודות וקווים, אבל לפני תוויות אחרות.
  • type [string] - 'text' או 'flag'. 'text' יוצר הערת טקסט פשוט ו-'דגל' יוצר הערה של בלון דיבור.

דוגמה: קטע הקוד הזה מגדיר תווית טקסט שחורה של 12 פיקסלים, עם הטקסט שנלקח מעמודה 0 ומוקצה לנקודה על הגרף בעמודה 2 של אותה שורה: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
backgroundColor string '#FFFFFF' (לבן) צבע הרקע של התרשים בפורמט הצבעים של Chart API.
color [צבע] string אוטומטית מציינת צבע בסיס שישמש לכל הסדרות. כל סדרה תהיה הדרגתית של הצבע שצוין. הצבעים מוגדרים בפורמט הצבעים של Chart API. המערכת תתעלם אם צוין colors.
צבעים מערך<string> אוטומטית ניתן להשתמש בפונקציה הזו כדי להקצות צבעים ספציפיים לכל סדרת נתונים. הצבעים מצוינים בפורמט הצבעים של Chart API. צבע i משמש לעמודה i של הנתונים, שעוטף עד להתחלה אם יש יותר עמודות נתונים מצבעים. אם כל הסדרות מקבלות וריאציות של צבע אחד, צריך להשתמש באפשרות color במקום זאת.
enableEvents boolean false האפשרות הזו גורמת לתרשימים להקפיץ אירועים שהופעלו על ידי משתמשים, כמו לחיצה או העברת עכבר. נתמכת רק בסוגי תרשימים ספציפיים. ראו אירועים בהמשך.
מילוי boolean false אם True, השדה ימלא את האזור שמתחת לכל שורה. זמין לתרשימי קו בלבד.
firstHiddenColumn number אין

אינדקס של עמודות נתונים. העמודה שמופיעה וכל העמודות הבאות לא ישמשו לשרטוט הרכיבים הראשיים של סדרת התרשים (למשל, קווים בתרשים קו או עמודות בתרשים עמודות), אלא כנתונים לסמנים ולהערות אחרות. שימו לב שעמודות המחרוזות נכללות במספר האינדקסים הזה.
גובה number 200 גובה התרשים, בפיקסלים. אם הפרמטר חסר או לא בטווח קביל, המערכת תשתמש בגובה של הרכיב שמכיל אותו. אם הערך הזה נמצא גם מחוץ לטווח הקביל, המערכת תשתמש בגובה ברירת המחדל.
labels string 'ללא'

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

  • 'ללא' – ללא תוויות.
  • value - הצגת ערך הפלח כתווית.
  • 'שם' - הצגת שם הפלח (שם העמודה) כתווית.
מקרא string 'ימינה' המיקום שבו יוצג מקרא של התרשים, ביחס לתרשים. מציינים אחת מהאפשרויות הבאות: 'top', 'bottom', 'left', 'right', 'none'. המערכת מתעלמת ממנו בתרשימים שלא כוללים מקרא (כמו תרשימי מפה).
מקסימלי number ערך נתונים מקסימלי הערך המקסימלי שמוצג בסולם. המערכת התעלמה ממנו בתרשימי עוגה. ברירת המחדל היא ערך הנתונים המקסימלי, מלבד תרשימי עמודות שבהם ברירת המחדל היא ערך הנתונים המקסימלי. כשבטבלה יש יותר מעמודת נתונים אחת, המערכת מתעלמת ממנה.
דקה number ערך הנתונים Mimimum הערך המינימלי שמוצג בסולם. המערכת התעלמה ממנו בתרשימי עוגה. ברירת המחדל היא ערך הנתונים המינימלי, מלבד תרשימי עמודות שבהם ברירת המחדל היא אפס. אם לטבלה יש יותר מעמודת נתונים אחת, המערכת מתעלמת ממנה בתרשימי עמודות.
showCategoryLabels boolean true האם התוויות יופיעו בציר הקטגוריה (כלומר שורה). זמין רק לתרשימי קו ולתרשימי עמודות.
showValueLabels boolean true הערך True מציג תווית בציר הערכים. זמין רק לתרשים קו ולתרשים עמודות.
singleColumnDisplay number אין הפונקציה מעבדת רק את עמודת הנתונים שצוינה. המספר הזה מופיע כאינדקס שמבוסס על אפס בטבלה, כאשר 0 היא עמודת הנתונים הראשונה. הצבע שהוקצה לעמודה היחידה זהה לצבע שהוקצה לכל העמודות. אי אפשר להשתמש בה עם תרשימי עוגה או תרשימי מפה.
title string מחרוזת ריקה כותרת התרשים. אם לא מציינים זאת, לא תוצג כותרת. הפרמטר המקביל בתרשים הוא chtt.
valueLabelsInterval number אוטומטית מרווח הזמן שבו יוצגו התוויות של ציר הערך. לדוגמה, אם הערך של min הוא 0, הערך של max הוא 100 והערך של valueLabelsInterval הוא 20, בתרשים יוצגו תוויות הצירים במספרים (0, 20, 40, 60, 80 100).
רוחב number 400 רוחב התרשים, בפיקסלים. אם הפרמטר חסר או לא בטווח קביל, המערכת תשתמש ברוחב הרכיב שמכיל אותו. אם הערך הזה נמצא גם מחוץ לטווח הקביל, המערכת תשתמש ברוחב ברירת המחדל.

שיטות

שיטה סוג הערך המוחזר תיאור
draw(data, options) אין משרטט את המפה.
getImageUrl() מחרוזת הפונקציה מחזירה את כתובת ה-URL של Google Chart API שמשמשת לבקשת התרשים. הערה: האורך המקסימלי הוא 2,000 תווים. מידע נוסף מופיע במאמר Google Chart API.

אירועים

אם מגדירים את המאפיין enableEvents כ-True, תרשימים תומכים יקפיצו אירועים עבור אירועי משתמש שמפורטים בטבלה הבאה. כל האירועים האלו מחזירים אובייקט event עם המאפיינים הבאים:

  • type – מחרוזת שמייצגת את סוג האירוע.
  • region – המזהה של האזור המושפע. צריך להוסיף את הפרמטר chof=json לסוג התרשים הגולמי כדי לראות רשימה של השמות הזמינים. לפרטים נוספים, ראו chof=json.
שם תיאור סוג ערך
error מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים. מזהה, הודעה
onmouseover מופעל כשהמשתמש מעביר את העכבר מעל רכיב בתרשים. "עכבר"
onmouseout מופעל כשהמשתמש מזיז את העכבר מעל רכיב בתרשים. 'mouseout'
onclick מופעל כשמשתמש לוחץ על רכיב בתרשים.

"קליק"

אילו תרשימים תומכים באירועים?

כל תרשימים שתומכים בפרמטר chof=json תומכים באירועי נינג'ה (כלומר, כל התרשימים מלבד תרשימים מיוחדים, כמו קודי QR).

דוגמה לטיפול באירועים

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

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

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

הנתונים נשלחים לשירות Google Chart API.

התאמה לשוק המקומי

התצוגה החזותית הזו תומכת בכל התאמה לשוק המקומי שנתמכת על ידי שירות Google Chart.