Google图表添加工具提示

Question

我想在我的图表中添加一些关于工具提示的数据，但我找不到办法。我试图添加角色：工具提示，但它不起作用

这是我的代码：

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

来自：originalScope.$on('loadMore', function() { hasFocus = true; getMatchesAsync(modelCtrl.$viewValue); });

至：{type: 'string', role: 'tooltip'}

编辑

<{> Columns Roles，例如{type: 'string', role: 'tooltip', p: {html: true}}和'tooltip'不适用于 Material 图表。

您可以使用核心图表，并使用选项 - 'style' - 来获得外观和感觉

以下代码段绘制两个图表，工具提示在底部工作，核心图表

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