问题描述
我想在我的图表中添加一些工具提示的数据,但我找不到一个办法。我尝试添加角色: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;
显示在工具提示中。
如何更改我的代码?
非常感谢你们!
我希望我的工具提示看起来像这样,这是可能吗?
从 {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图表添加工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!