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

Question

问题：如果您在Google地理标记中启用工具提示，则无法更改工具提示标题，它是您传递给Google图表绘制方法的第一列。

Answer 1

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

tooltip: {
        isHtml: true,
        showTitle: false
    }

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

Answer 2

如果您启用了工具提示可视化功能，那么在Google地理广告中，标题将是您传递给Google geochart.draw函数的数据的第一列。

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

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

我用这种方式创建了一个json数组：

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

将数据添加到Google dataTable：

    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; 
    }

结果如下：