Javascript 谷歌图表：修改toopl提示

我有一个使用谷歌图表API的联合图表。这里我想更新图表的工具提示

---

由于这些图表中存在大量重叠，我可能无法实际悬停在每个离散点上并查看数据。

您可以使用

数据视图来提供计算列

这将生成该行的工具提示

请参阅以下代码段

var dataView = new google.visualization.DataView(joinedData);
dataView.setColumns([0, 1, {
  calc: function (dt, row) {
    return getTooltip(dt, row);
  },
  role: 'tooltip',
  type: 'string',
  p: {
    html: true
  }
}, 2, {
  calc: function (dt, row) {
    return getTooltip(dt, row);
  },
  role: 'tooltip',
  type: 'string',
  p: {
    html: true
  }
}]);

function getTooltip(dt, row) {
  var tooltip = '<div class="tooltip">';
  tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>';

  tooltip += '<div>' + dt.getColumnLabel(1) + '</div>';
  if (dt.getValue(row, 1) === null) {
    tooltip += '<div>' + dt.getFormattedValue(row + 1, 1) + '</div>';
  } else {
    tooltip += '<div>' + dt.getFormattedValue(row, 1) + '</div>';
  }

  tooltip += '<div>' + dt.getColumnLabel(2) + '</div>';
  if (dt.getValue(row, 2) === null) {
    if (row > 0) {
      tooltip += '<div>' + dt.getFormattedValue(row - 1, 2) + '</div>';
    }
  } else {
    tooltip += '<div>' + dt.getFormattedValue(row, 2) + '</div>';
  }

  tooltip += '</div>';
  return tooltip;
}

var-dataView=newgoogle.visualization.dataView（joinedData）；
dataView.setColumns（[0,1,0{
计算：函数（dt，行）{
返回getTooltip（dt，row）；
},
角色：“工具提示”，
键入：“字符串”，
p:{
html：对
}
}, 2, {
计算：函数（dt，行）{
返回getTooltip（dt，row）；
},
角色：“工具提示”，
键入：“字符串”，
p:{
html：对
}
}]);
函数getTooltip（dt，行）{
var工具提示=“”；
工具提示+=''+dt.getFormattedValue（行，0）+''；
工具提示+=''+dt.getColumnLabel（1）+''；
if（dt.getValue（行，1）==null）{
工具提示+=''+dt.getFormattedValue（行+1，1）+''；
}否则{
工具提示+=''+dt.getFormattedValue（第1行）+''；
}
工具提示+=''+dt.getColumnLabel（2）+''；
if（dt.getValue（第2行）==null）{
如果（行>0）{
工具提示+=''+dt.getFormattedValue（第1行，第2行）+''；
}
}否则{
工具提示+=''+dt.getFormattedValue（第2行）+''；
}
工具提示+=''；
返回工具提示；
}


完整片段-->


注意：存在某种错误，

因为图表不考虑数据视图上的列属性

因此未设置
html
属性

解决方法是使用数据视图方法-->
toDataTable（）

另外：需要使用谷歌图表的更新库，请参见-->
此处发布的数据中的行是交错的，而不是注释中的情况，因此，无需调整行索引，请参见此更新-->