如何在谷歌地理图表中隐藏工具提示标题（并在工具提示中显示其他信息）答案

【问题标题】：How to hide tooltip title in google geocharts (and show other info in the tooltip)如何在谷歌地理图表中隐藏工具提示标题（并在工具提示中显示其他信息）
【发布时间】：2014-11-26 13:30:42
【问题描述】：

问题：如果您在 google geocharts 中启用工具提示，则无法更改工具提示标题，这是您传递给 google chart draw 方法的第一列。

【问题讨论】：

标签： javascript google-maps google-api google-visualization tooltip

【解决方案1】：

代替上面的CSS来隐藏标题，你可以将工具提示的showTitle选项设置为false

tooltip: {
        isHtml: true,
        showTitle: false
    }

然后，您可以在工具提示中使用 HTML 标记以完全按照您想要的方式显示工具提示。

【讨论】：

@Fratsen 我还有另一个问题，我的谷歌验证码出现了，我想隐藏它
我几乎要疯了，试图弄清楚这一点。 Geocharts 的配置选项没有将 tooltop.showTitle 列为可以传递的可用选项，所以我什至不知道它存在。完美运行！

【解决方案2】：

在 google geocharts 中，如果您启用工具提示可视化，标题将是您传递给 google geochart.draw 函数的数据的第一列。

出于性能考虑，我发现最好将 ISO3166 国家 2 字符代码传递给谷歌，它会立即解决，如果您使用扩展名称，它不会立即被识别，并且会在几秒钟内留下一些灰色区域。

不幸的是，在这个选择之后，工具提示标题显示了 2 个字母的国家 iso 代码，但我需要显示另一个标题。

我创建了一个这样构建的 json 数组：

var arCustomersDataByNation = [['Country', 'MyNumericData','Tooltip'],['RU',4,'My beautiful tooltip'],['AE',3,'NewTooltipTitle3'],['AF',1,'NewTooltipTitle4']...];

将数据添加到谷歌数据表：

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Country');
    data.addColumn('number', 'MyNumericData');
    data.addColumn({type:'string', role:'tooltip'});

    for(var i = 1; i < arCustomersDataByNation.length; i++){
        data.addRows([[arCustomersDataByNation[i][0],arCustomersDataByNation[i][1],arCustomersDataByNation[i][2]]]);
    }

并定义了谷歌图表选项，“isHtml: true”选项是基本的，是通过 CSS 破解 geochart 工具提示的唯一方法：

var arSubCColors = ['#ffffff','#99E6FF','#70DBFF','#1FC7FF','#00B4F1'];
var zoom_0_options = {
    backgroundColor: {fill:'#f2f2f2',stroke:'#FFFFFF' ,strokeWidth:0 },
    colorAxis:  {minValue:0,maxValue:4,colors: arSubCColors},
    datalessRegionColor: '#ccc',
    displayMode: 'regions',
    enableRegionInteractivity: 'true',
    keepAspectRatio: true,
    legend: 'none',
    region:'world',
    resolution: 'countries',
    sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
    tooltip : {textStyle: {color: '#666'}, showColorCode: true, isHtml: true}
};

在这一些 CSS 之后，“.google-visualization-tooltip-item:first-child”规则隐藏了粗体默认标题：

.google-visualization-tooltip{
        border: 0px!important;
        height : 30px!important;
        list-style: none!important;
    }
    .google-visualization-tooltip-item
    {
        list-style: none!important;
        position: relative;
        top: -3px;
        color: #707173!important;
        font-weight: bold!important;
    }
    .google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child 
    {
        display: none; 
    }

结果如下：

【讨论】：