Google地理图表地图:不带区域名称的工具提示

时间:2018-04-05 06:45:03

标签: javascript charts google-visualization tooltip

我正在创建Google GeoChart Map,我可以自定义工具提示,但我似乎无法摆脱其中的区域名称。我正在创建一张波兰地图,Google GeoChart Map使用ISO 3166-2区域标准,它在工具提示中显示省份的代码,看起来很奇怪。

这是代码

 function drawRegionsMap() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Województwo');
    data.addColumn('number', 'Frekwencja');
    data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');

    data.addRows( [
                  ['PL-DS', 60, '<p>Dolnośląskie</p>60%'],
                  ['PL-KP', 62, '<p>Kujawsko-Pomorskie</p>62%'], 
                  ['PL-LU', 59, '<p>Lubelskie</p>59%'], 
                  ['PL-LB', 61, '<p>Lubuskie</p>61%']
                  ])

    var options = {
        region: 'PL',
        resolution: 'provinces',
        datalessRegionColor: 'transparent',
        displayMode: 'regions',
        tooltip: {
            isHtml: true
        }
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
}

我最终得到这样的东西: enter image description here

1 个答案:

答案 0 :(得分:2)

您可以对数据表值使用对象表示法 您可以提供值(v:)和格式化值(f:

{v: 'PL-DS', f: ''}

工具提示默认显示格式化值,
提供一个空白字符串,将其从工具提示中删除......

请参阅以下工作代码段...

&#13;
&#13;
google.charts.load('current', {
  packages: ['geochart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Województwo');
  data.addColumn('number', 'Frekwencja');
  data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
  data.addRows([
    [{v: 'PL-DS', f: ''}, 60, '<p>Dolnoslaskie</p>60%'],
    [{v: 'PL-KP', f: ''}, 62, '<p>Kujawsko-Pomorskie</p>62%'],
    [{v: 'PL-LU', f: ''}, 59, '<p>Lubelskie</p>59%'],
    [{v: 'PL-LB', f: ''}, 61, '<p>Lubuskie</p>61%']
  ]);

  var options = {
    region: 'PL',
    resolution: 'provinces',
    datalessRegionColor: 'transparent',
    displayMode: 'regions',
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data, options);
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>
&#13;
&#13;
&#13;