דף זה תורגם על ידי Cloud Translation API.

תיאורי כלים

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

טיפים: מבוא

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

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

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

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

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

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

בדוגמה הזו, אנחנו מוסיפים תוכן מותאם אישית להסבר הקצר על ידי הוספת עמודה חדשה ל-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. כדי להפעיל את האפשרות הזו, צריך:

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

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

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

תוכן HTML מותאם אישית יכול לכלול גם תוכן שנוצר באופן דינמי. כאן מוסיפים הסבר קצר שמכיל טבלה שנוצרת באופן דינמי לכל ערך של קטגוריה. מכיוון שההסבר הקצר מצורף לערך השורה, אם תעבירו את העכבר מעל אחת מהעמודות יופיע ההסבר הקצר ב-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>';
}

הסבר קצר על סבב

בעזרת שירות CSS אפשר להחליף הסברים קצרים ב-Google Charts. בתרשים שבהמשך, ההסברים הקצרים מסובבים ב-30° בכיוון השעון באמצעות שירות ה-CSS המוטבע הזה, מיד לפני div בתרשים:


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

הערה: האפשרות הזו תפעל רק בהסברים קצרים ב-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 כדי ליצור תרשים להדפסה.

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

חלקים חשובים

      // 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 Chart, פעולה של הסבר קצר מוצגת רק אם היא גלויה, ורק אם היא מופעלת. (מושבתת, אבל הפעולות הגלויות מופיעות באפור).

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

הסברים קצרים יכולים להופיע ב-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 Chart באמצעות 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, כדאי לעיין במסמכי התיעוד בנושא התפקידים כדי לקרוא על שינויים עתידיים ואיך להימנע מכאבים בעתיד.