【问题标题】:Google geo chart map: tooltip without region name谷歌地理图表地图:没有区域名称的工具提示
【发布时间】:2018-04-05 06:45:03
【问题描述】:

我正在创建一个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);
}

我最终会得到这样的结果:

【问题讨论】:

  • 我认为 Google Viz 库不支持/不可能。它会破坏突出显示所选元素的目的。

标签: javascript charts google-visualization tooltip


【解决方案1】:

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

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

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


请参阅以下工作 sn-p...

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);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2012-07-25
  • 2016-08-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多