סרגל כלים

  1. סקירה כללית
  2. דוגמה
  3. שימוש
    1. סוגי פלט
    2. תחביר
  4. מדיניות נתונים

סקירה כללית

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

על ידי: 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: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

שימוש

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

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

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

סוגי פלט

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

  • גרסת CSV פשוטה של הנתונים (הדפדפן יעבד או יציע להוריד ולשמור אותם, בהתאם לתצורת הדפדפן ו/או
  • טבלת HTML עם נתונים, שנפתחת בחלון דפדפן חדש, ו/או
  • קוד <iframe> של HTML כדי להטמיע את הצגת הנתונים הזו בדף אינטרנט, ו/או
  • קישור לדף המאפשר למשתמש להטמיע את הגאדג'ט הזה בדף iGoogle שלו.

תחביר

google.visualization.drawToolbar(container, components)

פרמטרים

מאגר תגים
כינוי לרכיב DOM בדף. ה-API יצייר את סרגל הכלים לאלמנט הזה. הדבר דומה לפרמטר של המאגר להצגה חזותית רגילה. עליך להציב את סרגל הכלים בסמוך לתצוגה החזותית שמשתמשת בו.
רכיבים
מערך אובייקטים, וכל אחד מהם מתאר פורמט שאפשר לייצא אליו את הנתונים או את הרכיבים החזותיים שלהם. סרגל הכלים יחשוף את האפשרויות למשתמש בסדר שנוסף למערך. לכל אובייקט יש מאפיין סוג שמתאר את הפורמט, ולפחות מאפיין אחד נוסף, בהתאם לסוג:
  • type: 'csv' - אפשרות זו מייצאת את הנתונים לקובץ ערכים המופרדים בפסיקים. תיבת הדו-שיח 'שמירה בשם' תיפתח בדפדפן.
    • datasource: 'string' – כתובת ה-URL של מקור הנתונים.
  • type: html' - אפשרות זו מייצאת את הנתונים לטבלת HTML. הדף עם טבלת הנתונים ייפתח בחלון חדש בדפדפן.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
  • type: igoogle - האפשרות הזו מאפשרת למשתמש להוסיף את ההצגה לדף ה-IAB שלו. דף 'Add to iGoogle' ייפתח בדפדפן. ניתן להשתמש באפשרות הזו רק אם התצוגה החזותית זמינה בגרסת גאדג'ט.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
    • gadget : מחרוזת כתובת xml של גרסת הגאדג'ט. חשוב לשים לב שההצגה בסרגל הכלים משויכת לא להיות הגרסה עם גאדג'ט.
    • userprefs: אובייקט אופציונלי של העדפות שמתאים לוויזואליזציה הזו, ומציין את ההעדפות החזותיות.
  • type: htmlcode - האפשרות הזו יוצרת בלוק של קוד HTML שהמשתמש יכול להטמיע בדף אינטרנט כדי להציג את התצוגה החזותית בתוך iframe. ייפתח בדפדפן חלון קופץ עם אלמנט ה-HTML המדויק של הגאדג'ט.יש להשתמש באפשרות הזו רק אם התצוגה החזותית זמינה בגרסת גאדג'ט.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
    • gadget: מחרוזת כתובת ה-URL מסוג xml של הגאדג'ט.
    • userprefs: אובייקט אופציונלי של העדפות שמתאים לוויזואליזציה הזו, ומציין את ההעדפות החזותיות.
    • style: מחרוזת אופציונלית לסגנון של ה-iframe. לדוגמה: 'width: 300px; height: 500px;'.

דוגמה

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

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

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

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

סרגל הכלים תומך כרגע רק באנגלית ארה"ב.