用于表格谷歌可视化的工具提示 Html答案

【问题标题】：Tooltip Html for table google visualisation用于表格谷歌可视化的工具提示 Html
【发布时间】：2018-07-26 11:30:58
【问题描述】：

我想在结构上显示一个 HTML 格式的工具提示，其中包含隐藏的 2、3、4 列的数据。

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

【问题讨论】：

标签： javascript html google-visualization

【解决方案1】：

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

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

另外，表格图表不存在google-visualization-tooltip 的容器

为了得到想要的结果，我们可以等待图表的'ready'事件，
然后在表的容器<div> 上监听'mouseover 事件。
至于google-visualization-tooltip，我们可以自己添加...

请参阅以下工作 sn-p...

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 版本不再持续更新。从现在开始请使用新的 gstatic loader.js。

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

这只会改变load 语句，参见上面的sn-p。

2) 将事件侦听器添加到任何 google 图表时，例如 'ready'，应在绘制图表之前分配它们...

【讨论】：

感谢您的回答现在，如果我希望工具提示仅显示“数字”列中的单元格，我该怎么办？我想我必须通过循环来完成我的绘画？在最终项目中，我有几列，我希望工具提示显示鼠标在其上花费的列的详细信息。