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

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

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

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

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

Google Charts จะสร้างเคล็ดลับเครื่องมือสําหรับแผนภูมิหลักทั้งหมดโดยอัตโนมัติ รายงานจะแสดงผลเป็น 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 คอลัมน์ Datatable ที่มีบทบาทเคล็ดลับเครื่องมือและพร็อพเพอร์ตี้ HTML จะมีลักษณะดังนี้
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    หมายเหตุ: การดําเนินการนี้ไม่ได้ใช้ได้กับการแสดงภาพแผนภูมิฟองอากาศ เนื้อหาของเคล็ดลับเครื่องมือ HTML ของแผนภูมิฟองอากาศจะปรับแต่งไม่ได้

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

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

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