เคล็ดลับเครื่องมือ

  1. เคล็ดลับเครื่องมือ: บทนำ
  2. การระบุประเภทเคล็ดลับเครื่องมือ
  3. เคล็ดลับเครื่องมือมาตรฐาน
  4. การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ
  5. การใช้เคล็ดลับเครื่องมือ HTML
  6. การปรับแต่งเนื้อหา HTML
  7. เคล็ดลับเครื่องมือการหมุนเวียน
  8. การแสดงแผนภูมิในเคล็ดลับเครื่องมือ
  9. การดำเนินการของเคล็ดลับเครื่องมือ
  10. การใส่คำอธิบายประกอบข้อมูล
  11. แผนภูมิที่รองรับ

เคล็ดลับเครื่องมือ: บทนำ

เคล็ดลับเครื่องมือคือช่องเล็กๆ ที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนืออะไรบางอย่าง (โฮเวอร์การ์ดจะใช้พื้นที่ทั่วไปมากกว่าและสามารถปรากฏที่ใดก็ได้บนหน้าจอ เนื่องจากเคล็ดลับเครื่องมือจะแนบอยู่กับสิ่งหนึ่งเสมอ เช่น จุดบนแผนภูมิกระจาย หรือแท่งบนแผนภูมิแท่ง)

ในเอกสารประกอบนี้ คุณจะได้เรียนรู้วิธีสร้างและปรับแต่ง เคล็ดลับเครื่องมือใน Google แผนภูมิ

การระบุประเภทเคล็ดลับเครื่องมือ

Google แผนภูมิจะสร้างเคล็ดลับเครื่องมือสำหรับแผนภูมิหลักทั้งหมดโดยอัตโนมัติ ซึ่งจะแสดงผลเป็น SVG โดยค่าเริ่มต้น ยกเว้นในกรณี IE 8 ซึ่งจะแสดงผลเป็น VML คุณสามารถสร้างเคล็ดลับเครื่องมือ HTML ในแผนภูมิหลักได้โดยการระบุ tooltip.isHtml: true ในตัวเลือกแผนภูมิที่ส่งไปยังการเรียกใช้ draw() ซึ่งจะทำให้คุณสร้างการดำเนินการของเคล็ดลับเครื่องมือได้ด้วย

เคล็ดลับเครื่องมือมาตรฐาน

หากไม่มีเนื้อหาที่กำหนดเอง ระบบจะสร้างเนื้อหาของเคล็ดลับเครื่องมือโดยอัตโนมัติตามข้อมูลพื้นฐาน คุณดู เคล็ดลับเครื่องมือได้โดยวางเมาส์เหนือแท่งใดๆ ในแผนภูมิ

วางเมาส์เหนือแถบเพื่อดูเคล็ดลับเครื่องมือมาตรฐาน

การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

ในตัวอย่างนี้ เราเพิ่มเนื้อหาที่กำหนดเองลงในเคล็ดลับเครื่องมือโดยเพิ่มคอลัมน์ใหม่ลงใน 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 หากต้องการเปิดใช้งาน คุณจะต้องทำ 2 สิ่งต่อไปนี้

  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

ตัวอย่างนี้แสดงให้เห็นว่าแนบเคล็ดลับเครื่องมือ 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 Chart แผนภูมิในเคล็ดลับเครื่องมือช่วยให้ผู้ใช้ได้ข้อมูลเพิ่มเติมเมื่อวางเมาส์เหนือเอลิเมนต์ข้อมูล ซึ่งเป็นวิธีที่ดีในการให้รายละเอียดระดับสูงในครั้งแรกที่เห็น ในขณะเดียวกันก็ให้ผู้ใช้ได้เจาะลึกยิ่งขึ้นเมื่อต้องการ

แผนภูมิคอลัมน์ด้านล่างแสดงแผนภูมิของจำนวนผู้ชมสูงสุดล่าสุดของการแข่งขันกีฬาครั้งใหญ่หลายรายการ พร้อมกับเคล็ดลับเครื่องมือสำหรับแต่ละกิจกรรมจะแสดงแผนภูมิเส้นของจำนวนผู้ชมเฉลี่ยในช่วง 10 ปีที่ผ่านมา

มี 2-3 เรื่องที่ควรทราบ ก่อนอื่น ต้องวาดแผนภูมิที่พิมพ์ได้เพื่อให้ชุดข้อมูลแต่ละชุดแสดงในเคล็ดลับเครื่องมือ อย่างที่ 2 แผนภูมิเคล็ดลับเครื่องมือแต่ละรายการต้องมีเครื่องจัดการเหตุการณ์"พร้อม" ซึ่งเราเรียกใช้ผ่าน 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 คุณสามารถทำได้จากการทำงาน ตรงนี้เราจะเพิ่มการดำเนินการ 2 อย่าง อย่างแรกคือขยายลิ่มของแผนภูมิวงกลม และอีกอย่างเพื่อขยายขนาดแผนภูมิวงกลม

        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 โปรดดูเอกสารเกี่ยวกับบทบาทเพื่ออ่านข้อมูลเกี่ยวกับการเปลี่ยนแปลงในอนาคตและวิธีหลีกเลี่ยงปัญหาในอนาคต