带有 google 图表 table 的工具提示 Qtip

Question

我想在工具提示中显示未显示的第 2 列的内容。

这是我的样本：

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<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', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
 ['Mike',{v: 10000, f: ',000'}, {v: 10, f: ''},true],
 ['Jim', {v:8000, f: ',000'},{v:8, f: ''}, false],
 ['Alice', {v: 12500, f: ',500'}, {v: 12, f: ''},true],
 ['Bob', {v: 7000,f: ',000'},{v: 7,f: ''}, true],
 ['Sourav',{v: 7000,f: ',000'},{v: 7,f: ''}, true],
 ['Sunil', {v: 7000,f: ',000'}, {v: 7,f: ''},true],
 ['Vinod', {v: 7000,f: ',000'}, {v: 7,f: ''},true]

 ]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loo in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
 for (var j = 0; j < data.getNumberOfColumns(); j++) {
  var formattedValue = data.getFormattedValue(i, j);

  if(j==1){
   var y=j+1;
   var form2=data.getFormattedValue(i, y);

   console.log(i,j,formattedValue,form2);

   data.setFormattedValue(i, j, '<span title=' + '"' + formattedValue + '"' + '>' + formattedValue + '</span>');
  }
 }
}

google.visualization.events.addListener(table, 'ready', function () {

 $('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>

我无法在工具提示中显示 form2 的内容。我认为问题来自 setFormatedValue 方法，但我找不到解决方案。我正在尝试将此代码设置为 google 图表 table 没有工具提示

的替代方案

有人可以帮助我吗？

谢谢

Answer 1

用以下内容替换循环...

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

请参阅以下工作片段...

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<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', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
 ['Mike',{v: 10000, f: ',000'}, {v: 10, f: ''},true],
 ['Jim', {v:8000, f: ',000'},{v:8, f: ''}, false],
 ['Alice', {v: 12500, f: ',500'}, {v: 12, f: ''},true],
 ['Bob', {v: 7000,f: ',000'},{v: 7,f: ''}, true],
 ['Sourav',{v: 7000,f: ',000'},{v: 7,f: ''}, true],
 ['Sunil', {v: 7000,f: ',000'}, {v: 7,f: ''},true],
 ['Vinod', {v: 7000,f: ',000'}, {v: 7,f: ''},true]

 ]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

google.visualization.events.addListener(table, 'ready', function () {

 $('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>

带有 google 图表 table 的工具提示 Qtip

Toolip Qtip with google chart table

javascript

google-visualization

qtip2