Google图表添加工具提示 [英] Google charts add tooltip

问题描述

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

这是我的代码：

  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'}] 
]）; 
 
 // 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 3] .innerHTML; 
 qnt = document.getElementById（tabella）。rows [cont] .cells [1] .innerHTML; 
 
 var info = {
 name： nomi，
 tempo：time，
 qn：qnt，
}; 
 
 //向google数据添加行
 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 cont] .cells [1] .innerHTML; 显示在工具提示中。
如何更改我的代码？

非常感谢你们！

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

<需要更改列定义以允许html

从 {type： 'string'，role：'tooltip'}

to： {type：'string'，role： tooltip'，p：{html：true}}

EDIT

列角色，例如' tooltip'和'style'在材质图表中无效。

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

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

  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}}] 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> Tempor 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）; }，package：['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> ;.时间< / th> < / tr> < tr> < td& utente< / td> < td>这里，qnt的值< / td> < td> < / td> < td> 40< / td> < / tr> < tr> < td> nomi 2< / td> < td> nomi 2的工具提示< / td> < td> < / td> < td> 2< / td> < / tr> < tr& < td> nomi 3< / td> < td> nomi 3的工具提示< / td> < td& < / td> < td> 3< / td> < / tr>< / table>< div id =top_x_div_core>< / div>  

>

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?

解决方案

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>

这篇关于Google图表添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！