Question

我的地理广告代码无法正确显示，

它将整个地图显示为纯绿色，而不是基于阴影人气。
我尝试了各种颜色和coloraxismin./max值的变化无济于事。非常感谢任何见解。

-i只需要根据第二列的＃

来着色

谢谢

 <html>
  <head>
    <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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['State', 'Popularity'],
    ['AK','678'],
['AL','972'],
['AR','1403'],
['AZ','1420'],
['CA','10235'],
['CO','1703'],
['CT','1113'],
['DC','1136'],
['DE','511'],
['FL','5655'],
['GA','3085'],
['HI','479'],
['IA','6514'],
['ID','622'],
['IL','61795'],
['IN','11863'],
['KS','2323'],
['KY','4103'],
['LA','958'],
['MA','2208'],
['MD','5546'],
['ME','616'],
['MI','13239'],
['MN','17437'],
['MO','5681'],
['MS','654'],
['MT','714'],
['NC','1919'],
['ND','2003'],
['NE','2317'],
['NH','620'],
['NJ','3516'],
['NM','469'],
['NV','605'],
['NY','10336'],
['OH','9664'],
['OK','1828'],
['OR','1523'],
['PA','6264'],
['RI','342'],
['SC','901'],
['SD','1350'],
['TN','4612'],
['TX','5016'],
['UT','808'],
['VA','4530'],
['VT','268'],
['WA','2268'],
['WI','30132'],
['WV','1353'],
['WY','299']          
        ]);

        var options = {
    region: "US",
    resolution: "provinces",
     colorAxis: {
            minValue: 0,
            maxValue: 10000
          }
    };

        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

第二个数据表列中的值应为数字（678），而不是字符串（'678'）

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

google.charts.load('current', {
  callback: drawRegionsMap,
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Popularity'],
    ['AK',678],
    ['AL',972],
    ['AR',1403],
    ['AZ',1420],
    ['CA',10235],
    ['CO',1703],
    ['CT',1113],
    ['DC',1136],
    ['DE',511],
    ['FL',5655],
    ['GA',3085],
    ['HI',479],
    ['IA',6514],
    ['ID',622],
    ['IL',61795],
    ['IN',11863],
    ['KS',2323],
    ['KY',4103],
    ['LA',958],
    ['MA',2208],
    ['MD',5546],
    ['ME',616],
    ['MI',13239],
    ['MN',17437],
    ['MO',5681],
    ['MS',654],
    ['MT',714],
    ['NC',1919],
    ['ND',2003],
    ['NE',2317],
    ['NH',620],
    ['NJ',3516],
    ['NM',469],
    ['NV',605],
    ['NY',10336],
    ['OH',9664],
    ['OK',1828],
    ['OR',1523],
    ['PA',6264],
    ['RI',342],
    ['SC',901],
    ['SD',1350],
    ['TN',4612],
    ['TX',5016],
    ['UT',808],
    ['VA',4530],
    ['VT',268],
    ['WA',2268],
    ['WI',30132],
    ['WV',1353],
    ['WY',299]
  ]);

  var options = {
    region: "US",
    resolution: "provinces",
    colorAxis: {
      minValue: 0,
      maxValue: 10000
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data, options);
}

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

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

Answer 2

您的数据不是数字（＆＃34;值＆＃34;是字符串）。将它们更改为数字。

var data = google.visualization.arrayToDataTable([
  ['State', 'Popularity'],
  ['AK','678'],
  ['AL','972'],

应该是：

var data = google.visualization.arrayToDataTable([
  ['State', 'Popularity'],
  ['AK', 678],
  ['AL', 972],

proof of concept fiddle

代码段

＆＃13;

html,
body,
#regions_div {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['State', 'Popularity'],
      ['AK', 678],
      ['AL', 972],
      ['AR', 1403],
      ['AZ', 1420],
      ['CA', 10235],
      ['CO', 1703],
      ['CT', 1113],
      ['DC', 1136],
      ['DE', 511],
      ['FL', 5655],
      ['GA', 3085],
      ['HI', 479],
      ['IA', 6514],
      ['ID', 622],
      ['IL', 61795],
      ['IN', 11863],
      ['KS', 2323],
      ['KY', 4103],
      ['LA', 958],
      ['MA', 2208],
      ['MD', 5546],
      ['ME', 616],
      ['MI', 13239],
      ['MN', 17437],
      ['MO', 5681],
      ['MS', 654],
      ['MT', 714],
      ['NC', 1919],
      ['ND', 2003],
      ['NE', 2317],
      ['NH', 620],
      ['NJ', 3516],
      ['NM', 469],
      ['NV', 605],
      ['NY', 10336],
      ['OH', 9664],
      ['OK', 1828],
      ['OR', 1523],
      ['PA', 6264],
      ['RI', 342],
      ['SC', 901],
      ['SD', 1350],
      ['TN', 4612],
      ['TX', 5016],
      ['UT', 808],
      ['VA', 4530],
      ['VT', 268],
      ['WA', 2268],
      ['WI', 30132],
      ['WV', 1353],
      ['WY', 299]
    ]);

    var options = {
      region: "US",
      resolution: "provinces",
      colorAxis: {
        minValue: 0,
        maxValue: 10000
      }
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }
</script>
<div id="regions_div"></div>

＆＃13;

Google Geochart不对轴上的省份进行着色

2 个答案: