Google图表添加了工具提示

Question

I would like to add some data on tooltips in my chart but I can't find a way to do it. I tried to add role: tooltip but it didn't work

this is my code:

google.charts.load('current', {
  callback: function () {
    var cont = 1;
    var rowtbl = document.getElementById("tabella").rows.length;
    rowtbl = rowtbl - 1;

    // use object notation for column headings
    var data = new google.visualization.arrayToDataTable([
      [{type: 'string', label: ''},  {type: 'number', label: 'Tempo in minuti: '}, {type: 'string', role: 'tooltip'}]
    ]);

    //number rows table
    while(cont <= rowtbl){
      var nomi;
      var qnt;
      var time;
      nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML;
      time = document.getElementById("tabella").rows[cont].cells[3].innerHTML;
      qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML;

      var info = {
        name: nomi,
        tempo: time,
        qn: qnt,
      };

      // add row to google data
      data.addRow([
        info.name,
        parseFloat(info.tempo),
        info.qn

      ]);

      cont = cont +1;
    }

    var options = {
        tooltip: {isHtml: true},
      legend: { position: 'none' },
      bar: { groupWidth: "80%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

I want qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; to be show in the tooltip. How do I need to change my code?

Thank you very much guys!

EDIT

I would like my tooltip to look like this, is this possible?

Answer 1

need to change column defintion to allow html

from: {type: 'string', role: 'tooltip'}

to: {type: 'string', role: 'tooltip', p: {html: true}}

EDIT

Columns Roles such as 'tooltip' and 'style' do not work on Material charts.

you can use a Core chart, with the option -- theme = 'material' -- to get the look and feel close

the following snippet draws both charts, the tooltips work on the bottom, Core chart

 google.charts.load('current', { callback: function () { var cont = 1; var rowtbl = document.getElementById("tabella").rows.length; rowtbl = rowtbl - 1; var data = new google.visualization.arrayToDataTable([ [{type: 'string', label: ''}, {type: 'number', label: 'Tempo in minuti: '}, {type: 'string', role: 'tooltip', p: {html: true}}] ]); //number rows table while(cont <= rowtbl){ var nomi; var qnt; var time; nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML; time = document.getElementById("tabella").rows[cont].cells[3].innerHTML; qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; var tooltip; tooltip = '<div class="ggl-tooltip">'; tooltip += '<div><span class="ggl-tooltip-title">' + nomi + '</span></div>'; tooltip += '<div><span class="ggl-tooltip-category">Tempo in minuti:</span></div>'; tooltip += '<div><span class="ggl-tooltip-time">' + time + '</span></div>'; tooltip += '<div><span class="ggl-tooltip-note">' + qnt + '</span></div>'; tooltip += '</div>'; data.addRow([ nomi, parseFloat(time), tooltip ]); cont = cont +1; } var options = { bar: {groupWidth: '80%'}, chartArea: {width: '90%'}, height: 400, legend: {position: 'none'}, theme: 'material', tooltip: {isHtml: true}, width: '100%' }; var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div_core')); chart.draw(data, options); }, packages: ['corechart'] }); 

 .ggl-tooltip { border: 1px solid #E0E0E0; font-family: Arial, Helvetica; font-size: 12pt; padding: 12px 12px 12px 12px; } .ggl-tooltip div { padding: 6px 6px 6px 6px; } .ggl-tooltip-title { color: #000000; font-weight: bold; } .ggl-tooltip-category { color: #676767; } .ggl-tooltip-time { color: #1565C0; font-size: 20pt; } .ggl-tooltip-note { color: #F44336; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <table id="tabella"> <tr> <th> nomi </th> <th> qnt </th> <th> </th> <th> time </th> </tr> <tr> <td> utente </td> <td> Here value of qnt </td> <td> </td> <td> 40 </td> </tr> <tr> <td> nomi 2 </td> <td> tooltip for nomi 2 </td> <td> </td> <td> 2 </td> </tr> <tr> <td> nomi 3 </td> <td> tooltip for nomi 3 </td> <td> </td> <td> 3 </td> </tr> </table> <div id="top_x_div_core"></div>