Question

我需要使用displayMode: 'markers',，同时我需要为所有国家/地区设置一些颜色。任何想法都表示赞赏。

＆＃13;

<html>
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzxARGqOQpBrFuR7TqJwHWjyxHMf-gfIk&callback=initMap"
        type="text/javascript"></script>
        <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
        <script type='text/javascript'>
            google.charts.load('upcoming', {'packages': ['geochart']});
            google.charts.setOnLoadCallback(drawMarkersMap);


            function drawMarkersMap() {
                var data = google.visualization.arrayToDataTable([
                    ['City', 'Population', 'Area'],
                    ['Kiev', 2761477, 1285.31],
                    ['Kherson', 1324110, 181.76],
                    ['Zakarpattiya', 1324110, 181.76],
                    ['Zhitomir', 1324110, 181.76],
                    ['Harkiv', 1324110, 181.76],
                    ['Kirovohrad', 1761477, 181.76],
                ]);
                
                
              


                var options = {
                    region: 'UA',
                    resolution: 'provinces',
                    displayMode: 'markers',
                    pointSize: 10,
                    pointShape: 'diamond',
                    colorAxis: {colors: ['green', 'blue']},
                    enableRegionInteractivity: false,
                    hAxis: {minValue: 20, maxValue: 20},
                    sizeAxis: {minSize: 27, maxSize: 27},
                    enableRegionInteractivity: 'true',
                    defaultColor: '#ffffff',
                  

                };
                options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors


                var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
            ;
        </script>
    </head>
<body>
  
     <div id="chart_div" style="width: 100%; height: 800px;"></div>

  </body>

</html>

＆＃13;

Answer 1

你可以使用选项 - ＆gt; datalessRegionColor - 为地区设置背景颜色

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

＆＃13;

google.charts.load('current', {
  callback: drawRegionsMap,
  packages:['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Population', 'Area'],
    ['Kiev', 2761477, 1285.31],
    ['Kherson', 1324110, 181.76],
    ['Zakarpattiya', 1324110, 181.76],
    ['Zhitomir', 1324110, 181.76],
    ['Harkiv', 1324110, 181.76],
    ['Kirovohrad', 1761477, 181.76],
  ]);

  var options = {
    region: 'UA',
    resolution: 'provinces',
    displayMode: 'markers',
    pointSize: 10,
    pointShape: 'diamond',
    colorAxis: {colors: ['green', 'blue']},
    hAxis: {minValue: 20, maxValue: 20},
    sizeAxis: {minSize: 27, maxSize: 27},
    datalessRegionColor: '#ffcc80'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google地理图表将标记displayMode设置为国家/地区的背景颜色

1 个答案: