تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تلميحات

نصائح الأداة: مقدمة
تحديد نوع التلميح
تلميحات الأدوات العادية
تخصيص محتوى التلميح
استخدام تلميحات HTML
تخصيص محتوى HTML
استخدام تلميحات الأدوات بالتناوب
وضع الرسوم البيانية في تلميحات الأدوات
إجراءات التلميح
إضافة تعليقات توضيحية إلى البيانات
الرسوم البيانية المتوافقة

نصائح الأداة: مقدمة

تلميحات الأدوات هي الصناديق الصغيرة التي تنبثق عند تمرير مؤشر الماوس فوق شيء ما. (البطاقات العامة أكثر عمومية ويمكن أن تظهر في أي مكان على الشاشة؛ يتم دائمًا إرفاق تلميحات الأدوات بشيء، مثل نقطة على مخطط النقاط المبعثرة أو شريط في مخطط شريطي).

في هذا المستند، ستتعرّف على كيفية إنشاء تلميحات الأدوات وتخصيصها في مخططات Google.

تنشئ مخططات Google تلميحات أدوات لجميع المخططات الأساسية تلقائيًا. وسيتم عرضها بشكل SVG افتراضيًا، باستثناء IE 8 حيث سيتم عرضها كـ VML. يمكنك إنشاء تلميحات HTML على الرسوم البيانية الأساسية من خلال تحديد tooltip.isHtml: true في خيارات الرسم البياني التي تم تمريرها إلى استدعاء draw()، مما سيسمح لك أيضًا بإنشاء إجراءات التلميحات.

تلميحات الأدوات العادية

في حال عدم توفّر أي محتوى مخصّص، يتم إنشاء محتوى التلميح تلقائيًا استنادًا إلى البيانات الأساسية. ويمكنك رؤية التلميح بتمرير مؤشر الماوس فوق أي شريط في الرسم البياني.

مرِّر مؤشر الماوس فوق الأشرطة للاطّلاع على تلميحات الأدوات العادية.

في هذا المثال، نضيف محتوى مخصصًا إلى التلميحات عن طريق إضافة عمود جديد إلى جدول البيانات ووضع علامة عليه باستخدام دور الأداة.

ملاحظة: هذه الميزة غير متاحة في التمثيل البصري لفقاعة تفسيرية.

        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>';
}

استخدام تلميحات الأدوات بالتناوب

يمكن تدوير النصائح في مخططات Google باستخدام CSS. في المخطط أدناه، يتم تدوير تلميحات الأدوات بزاوية 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 لإنشاء رسم بياني قابل للطباعة.

مهم:جميع مخططات التلميحات يجب رسمها قبل المخطط الأساسي. يعد هذا ضروريًا لالتقاط الصور وإضافتها إلى جدول البيانات للمخطط الأساسي.

أجزاء مهمة

      // 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>

يمكن أن تتضمن تلميحات الأدوات أيضًا إجراءات محددة من خلال جافا سكريبت. وكمثال بسيط، في ما يلي تلميح به إجراء ينبثق مربع حوار عند نقر المستخدم على "عرض نموذج الكتاب":

يتم تشغيل الخيار 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. ويؤدي ذلك إلى استمرار التلميح مما يسمح للمستخدم بتحديد الإجراء بسهولة أكبر.

لا يلزم اتخاذ الإجراءات كتنبيهات بالطبع؛ بل يمكنك تنفيذ أي شيء من جافا سكريبت، بل يمكنك اتخاذ إجراء. سنضيف هنا إجراءين: أحدهما لتصغير شكل المخطط الدائري، والآخر لتقليصه.

        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، يُرجى الاطّلاع على الوثائق عن الأدوار للاطّلاع على التغييرات المستقبلية وكيفية تجنُّب الألم في المستقبل.