javascript - 谷歌图表添加工具提示

Question

我想在图表中的工具提示上添加一些数据，但我找不到方法。我尝试添加 role: tooltip 但没有成功

这是我的代码:

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

我希望 qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; 显示在工具提示中。我需要如何更改我的代码？

非常感谢大家!

编辑

我希望我的工具提示看起来像这样，这可能吗？

Answer 1

需要更改列定义以允许 html

来自:{类型:'字符串'， Angular 色:'工具提示'}

至:{type:'string'，role:'tooltip'，p:{html:true}}

编辑

Columns Roles例如 'tooltip' 和 'style' 不适用于 Material 图表。

您可以使用核心图表，并使用选项 -- theme = 'material' -- 来获得接近的外观和感觉

以下代码片段绘制了两个图表，工具提示位于底部，核心图表

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>