Question

我正在使用Google Maps API，我想更改Google地图中状态选择时多个状态的颜色。像这样的东西

我尝试了以下代码，但它正在使整个国家变色。

<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'map_api_key'
        });
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
            ['State', 'Popularity'],
            ['Maharashtra', 022],
            ['Goa', 19],
            ['Gujarat', 20]
       ]);

       var options = {};
       options['region'] = 'IN';
       options['colors'] = ['yellow', 'green', 'blue']; //orange colors
       options['dataMode'] = 'markers';

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

       chart.draw(data, options);
   }
   </script>
</head>
    <body>
        <div id="regions_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

但是它正在用蓝色为印度着色

Answer 1

首先，为了显示每个“状态”，您将需要以下选项...

resolution: 'provinces'

接下来，GeoChart使用的颜色与其他Google图表不同。
它使用ColorAxis

colorAxis-一个对象，用于指定颜色列值和渐变色之间的映射。要指定此对象的属性，可以使用对象文字表示法，如下所示：
{maxValue: 1, minValue: 0, colors: ['#FF0000', '#00FF00']}

根据行值从提供的多种颜色中计算出颜色。
在上述示例中，
最小值行的颜色为＃FF0000
具有最大值的行的颜色将是＃00FF00
其余的行颜色将是两者之间某个地方的渐变

为了为每个州提供唯一的颜色，
我们将需要提供每一行的值，
以及颜色

因此在您的示例中，我们将需要...

colorAxis: {
  colors: ['green', 'blue', 'yellow'],
  values: [19, 20, 22]  // <-- colors must be in numerical order
},

请注意，要突出显示的每个状态都必须具有唯一的值。

请参阅以下工作片段...

google.charts.load('current', {
  packages:['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Popularity'],
    ['Maharashtra', 22],
    ['Goa', 19],
    ['Gujarat', 20]
  ]);

  var options = {
    region: 'IN',
    colorAxis: {
      colors: ['green', 'blue', 'yellow'],
      values: [19, 20, 22]
    },
    dataMode: 'markers',
    resolution: 'provinces',
    legend: 'none'
  };

  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>

如何在谷歌地图中选择时更改特定状态的颜色

1 个答案: