如何在Google地理地理图表中隐藏图例工具提示并仅保存Contries名称

时间:2015-08-29 17:58:58

标签: google-maps charts maps google-visualization visualization

嘿伙计我试图隐藏图例工具提示并仅保存国家/地区名称或隐藏所有工具提示但不成功。请帮忙。比我使用的代码更多:

<div>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geomap"]});
      google.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'ATI'],
          ['Portugal', 1],
          ['Brazil', 7],
          ['Peru', 9],
          ['Argentina', 3],
          ['Spain', 3],
          ['Mexico', 3],
          ['Venezuela', 7],
          ['Ecuador', 4],
          ['Chile', 6],
          ['Colombia', 3],          
          ['Costa Rica', 4],

        ]);

        var options = {};

        options['dataMode'] = 'regions';
        options['region'] = 'world';
        options['showLegend'] = false;
        options['width'] = '100%';
        options['tooltip.trigger'] = 'none';
        options['tooltip'] = {textStyle: {color: '#FFF'}, showColorCode: false};
        options['tooltip.textStyle'] = {color: 'white'};
        options['height'] = '600px';
        options['colors'] = [0xf9ffed, 0xff0943, 0x50eb1f, 0xeab4d2];
        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);



      };
    </script>
     <div align="center" id="regions_div" style="width: auto; height: auto;"></div>

</div>

因此,我看到了一张地图,但附有图例编号。我不知道如何隐藏它们。

1 个答案:

答案 0 :(得分:1)

GeoMap(google.visualization.GeoMap)是基于 Flash 的控件,不支持为其配置工具提示可见性,而GeoChart(google.visualization.GeoChart)是基于SVG的控件,其中turn替换GeoMap控件和supports more options for customizing it,特别是隐藏工具提示的能力。

说过我建议用GeoChart替换GeoMap,如下所示。

示例

google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawMap);

function drawMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'ATI'],
      ['Portugal', 1],
      ['Brazil', 7],
      ['Peru', 9],
      ['Argentina', 3],
      ['Spain', 3],
      ['Mexico', 3],
      ['Venezuela', 7],
      ['Ecuador', 4],
      ['Chile', 6],
      ['Colombia', 3],
      ['Costa Rica', 4],

    ]);

    var options = {};


    options['colorAxis'] = { colors: ['#f9ffed', '#ff0943', '#50eb1f', '#eab4d2'] };
    options['tooltip'] = { trigger: 'none' };
    options['legend'] = 'none';
    options['displayMode'] = 'regions';
    options['width'] = '100%';
    options['height'] = '600px';

    var container = document.getElementById('regions_div');

    var geomap = new google.visualization.GeoChart(container);
    geomap.draw(data, options);



};
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div align="center" id="regions_div" style="width: auto; height: auto;"></div>