谷歌图表工具提示答案

【问题标题】：Google Charts tooltips谷歌图表工具提示
【发布时间】：2013-03-20 05:30:09
【问题描述】：

有没有办法让 Google 图表中的工具提示始终可见？正如我在 API 中找到的那样，我只能完全禁用它们。

【问题讨论】：

标签： javascript tooltip google-visualization

【解决方案1】：

目前在 Google Visualization API 中无法做到这一点。

你可以试试HTML Tooltips，看看你能不能找出CSS让它们正常显示（有可能）。

或者，您可以编写自己的 Javascript 来显示您想要的任何内容。不幸的是，我在任何地方都没有看到这样的工作示例。如果您确实找到了解决方案，请在此处分享并标记为答案！

【讨论】：

【解决方案2】：

var svg = document.getElementById('div_id').getElementsByTagName('svg')[0];     
var parent = svg.childNodes[4].firstChild.nextSibling.firstChild.nextSibling.firstChild.parentNode;
for(var i=0; i<svg.childNodes[4].childNodes[1].childNodes[1].childElementCount; i++) {
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');  
    var child = svg.childNodes[4].firstChild.nextSibling.firstChild.nextSibling.firstChild; 
    text.setAttribute('x', child.getAttribute('x'));
    text.setAttribute('y', child.getAttribute('y'));
    text.setAttribute('fill', '#000000');
    text.setAttribute('dy', '-2');      
    text.textContent = 'Hell0'; 
    parent.removeChild(child);
    g.appendChild(child);   
    g.appendChild(text);
    parent.appendChild(g);
}

我在上面编写了这段 javascript 代码，以将文本“Hell0”附加到每列的顶部。

这种方法的缺点是工具提示和交互性不起作用。所以你需要禁用如下

tooltip: {tigger: 'none'},
enableInteractivity: false,

【讨论】：