תיאורי כלים

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

טיפים לשימוש בכלי: מבוא

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

במסמכים אלה תלמדו איך ליצור ולהתאים אישית הסברים קצרים בתרשימים של Google.

ציון סוג ההסבר הקצר

התכונה 'תרשימים של Google' יוצרת באופן אוטומטי הסברים קצרים עבור כל תרשימי הליבה. הם יעובדו כ-SVG כברירת מחדל, פרט ל-IE 8 שבהם הם יעברו עיבוד כ-VML. אפשר ליצור הסברים ב-HTML על גבי תרשימי ליבה על ידי ציון הערך tooltip.isHtml: true באפשרויות התרשים שהועברו לקריאהdraw(), שגם תאפשר לכם ליצור פעולות ToolTip.

הסברים רגילים

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

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

התאמה אישית של תוכן של הסברים

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

הערה: המאפיין הזה לא נתמך בתצוגה החזותית של תרשים בועות. 

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

שימוש בהסברים קצרים על HTML

הדוגמה הזו מתבססת על האפשרות הקודמת, על ידי הפעלת הסברים קצרים ב-HTML. חשוב לשים לב להוספה של tooltip.isHtml: true לאפשרויות התרשים. 

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

זה לא נראה הרבה שונה, אבל עכשיו אנחנו יכולים להתאים אישית את ה-HTML.

התאמה אישית של תוכן HTML

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

  1. עליך לציין את tooltip.isHtml: true באפשרויות התרשים. כך התרשים יתבסס על ההסברים הקצרים ב-HTML (ולא בפורמט SVG).
  2. יש לסמן עמודה שלמה או תא ספציפי בטבלת הנתונים באמצעות המאפיין המותאם אישית html. אחת מעמודות הטבלה עם תפקיד ההסבר הקצר ומאפיין ה-HTML תהיה:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    הערה: פעולה זו לא פועלת עם ההצגה החזותית של תרשים בועה. אי אפשר להתאים אישית את התוכן של תיאורי ה-HTML של תרשים הבועות.

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

תוכן HTML מותאם אישית יכול להיות פשוט כמו הוספת תג <img> או הדגשת טקסט כלשהו:

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

הדוגמה הזו מראה איך ניתן לצרף הסבר קצר של HTML מותאם אישית לעמודה של דומיין. (בדוגמאות הקודמות, הקובץ צורף לעמודת נתונים). כדי להפעיל את ההסבר הקצר על ציר הדומיין, הגדירו את האפשרות focusTarget: 'category'. 

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

הסברים קצרים בסבב

את הטיפים אפשר להציג בתרשימים של Google באמצעות CSS. בתרשים שלמטה,

<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

5 פנה פנה פנה פנה אוטומטית מוצגים אוטומטית, הח" שהכי שהכי , כרגע , , ואז "", לשימוש מסוג , )( "", מתאים, " ", מתאים, מתאים, ",, מתאים מסוג כבר מסוג עבור . . מקרא: { location: 'none' }, עמודה: { groupWidth: '90%' }, צבעים: ['#A61D4C'] }; var chart = new google.visualization.ColumnChart(document.getElementById('overview_ נפרדd'); תרשים.draw(data, options); }

שימו לב שהשיטה הזו רלוונטית רק להסברים קצרים ב-HTML, כלומר לתיאורים קצרים עם האפשרות isHtml: true.

<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']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

הוספת תרשימים להסבר הקצר

ההסברים הקצרים ב-HTML יכולים לכלול את רוב תכני ה-HTML – אפילו תרשים Google. בעזרת תרשימים שמוצגים בהם הסברים קצרים, המשתמשים יכולים לקבל מידע נוסף כשהם מעבירים את העכבר מעל רכיב נתונים: זו דרך טובה לתת פרטים ברמה גבוהה במבט ראשון ולאפשר לאנשים להתעמק בנתונים מתי שהם רוצים.

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

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

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

חלקים חשובים
      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
דף אינטרנט מלא
<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']});
      google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

פעולות עם הסברים קצרים

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

האפשרות tooltip מופעלת כשהמשתמש בוחר קצה עוגה, ולכן הקוד שמוגדר ב-setAction פועל:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

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

visible ו-enabled צריכות להיות פונקציות שמחזירות ערכים נכונים או לא נכונים. הפונקציות האלה עשויות להיות תלויות במזהה הרכיב ובבחירת המשתמש, וכך לשפר את הניראות ואת היכולת ללחוץ על הפעולה.

הסברים קצרים יכולים להופיע גם ב-focus וגם ב-selection. עם זאת, מומלץ לבצע פעולות באמצעות הסברים קצרים (selection). כתוצאה מכך, ההסבר הקצר יישמר, כך שהמשתמש יוכל לבחור את הפעולה בקלות רבה יותר.

הפעולות לא צריכות להיות, כמובן: כל דבר שניתן לעשות מ-JavaScript, ואפשר לבצע אותו מפעולה. כאן נוסיף שתי פעולות: אחת להגדלה של משולש העוגה, ואחת לכיווץ שלה.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

הוספת הערות לנתונים

אפשר להוסיף שכבת-על של טקסט ישירות לתרשים Google באמצעות annotationTextבמקום tooltip במקום העמודה. (ניתן לראות את ההסבר הקצר על ידי העברת העכבר מעל להערה.)

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

תרשימים נתמכים

הסברים קצרים ב-HTML נתמכים בשלב זה עבור סוגי התרשימים הבאים:

אם אתם משתמשים בתפקידים annotationText או tooltip, כדאי לקרוא את המאמרים בנושא תפקידים כדי לקרוא על שינויים עתידיים ועל הדרכים להימנע מהם.