我想在包含隐藏的第 2、3、4 列数据的结构上显示 HTML 格式的工具提示。
当我在单元格上执行 onmouseover 时，我无法让 addeventlistener 工作。
我希望将鼠标移到“数字”列(第 1 列)上时触发工具提示。
<html>
<head>
<style>
div.google-visualization-tooltip {
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}
</style>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable,);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
table.draw(view, {allowHtml: true});
google.visualization.events.addListener(table, 'onmouseover', function(e){
setTooltipContent(data,e.row);
});
}
// set tooltip
function setTooltipContent(data,row) {
if (row != null) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
tooltip.innerHTML = content;
}
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</html>最佳答案
表格图表仅发布以下events ...
'select', 'page', 'sort', 'ready'
此外，没有容器 google-visualization-tooltip存在表格图表
为了得到想要的结果，我们可以等待图表的'ready'事件，
然后听 'mouseover table 容器上的事件 <div> .
至于google-visualization-tooltip ，我们可以添加我们自己的...
请参阅以下工作片段...
google.charts.load('current', {packages:['table']});
google.charts.setOnLoadCallback(drawTable);
// start chart
function drawTable() {
var data = new google.visualization.DataTable();
// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'number');
data.addColumn('number', 'ok');
data.addColumn('number', 'warnning');
data.addColumn('number', 'nok');
// add data
data.addRows([
['Mike',18,10,3,5],
['Jim', 8,5,2,1],
['Alice', 12,6,3,3],
['Bob', 7,2,4,1],
['Sourav',9,1,0,8],
['Sunil', 16,15,0,1],
['Vinod', 19,14,4,1]
]);
var container = document.getElementById('table_div');
var table = new google.visualization.Table(container);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
google.visualization.events.addListener(table, 'ready', function() {
container.addEventListener('mouseover', function (e) {
setTooltipContent(data, e);
});
container.addEventListener('mouseout', function (e) {
setTooltipContent(data, e);
});
});
table.draw(view, {allowHtml: true});
}
// set tooltip
function setTooltipContent(data, e) {
var col = null;
var row = null;
var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
if (e.type === 'mouseover') {
if (e.target.tagName === 'TD') {
col = (e.target.cellIndex);
row = (e.target.parentNode.rowIndex - 1);
}
if ((row !== null) && (col === 1)) {
var content = '<div class="custom-tooltip" ><table border="1"><tr><td>OK</td><td>warnnig</td><td>NOK</td></tr><tr><td>' + data.getValue(row, 2) + '</td><td>' + data.getValue(row, 3) + '</td><td>' + data.getValue(row, 4) + '</td></tr></table></div>'; //generate tooltip content
tooltip.innerHTML = content;
tooltip.style.display = 'block';
tooltip.style.left = (e.pageX + 16) + "px";
tooltip.style.top = (e.pageY + 16) + "px";
} else {
tooltip.style.display = 'none';
}
} else {
tooltip.style.display = 'none';
}
}div.google-visualization-tooltip {
display: none;
position: absolute;
width: auto;
height:auto;
background-color: red;
color: #000000;
text-align: center;
vertical-align: middle;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div class="google-visualization-tooltip"></div>注释
1) 脚本库 jsapi不应再使用。
<script src="https://www.google.com/jsapi"></script>
参见 release notes ...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic
loader.jsfrom now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
这只会改变load声明，请参阅上面的片段。
2) 将事件监听器添加到任何 Google 图表时，例如 'ready' ，应该在在绘制图表之前分配它们...
关于javascript - 用于表格谷歌可视化的工具提示 Html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51537783/