Question

我想在具有隐藏的第2、3、4列数据的结构上以HTML格式显示工具提示。

在单元格上进行鼠标悬停时，我无法使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>

Answer 1

表格图表仅发布以下events ...

'select', 'page', 'sort', 'ready'

而且，表格图表不存在google-visualization-tooltip的容器

要获得理想的结果，我们可以等待图表的'ready'事件，
然后在表的容器'mouseover上监听<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 ...

通过jsapi加载程序仍然可用的Google Charts版本不再保持一致更新。从现在开始，请使用新的静态loader.js。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改load语句，请参见上面的代码段。

2），当将事件侦听器添加到任何Google图表（例如'ready'）时，应在绘制图表之前为其分配事件监听器...

表格Google可视化工具提示HTML

1 个答案: