如何在 Geochart 中为每个州设置区域颜色？答案

【问题标题】：How can i Set the Region color for each state in Geochart?如何在 Geochart 中为每个州设置区域颜色？
【发布时间】：2013-06-24 06:44:54
【问题描述】：

我想像图片中那样为美国的每个州设置区域颜色？在 geochart 中可以吗？

请指导我这样做。

感谢&问候，兰吉斯·库马尔。

【问题讨论】：

标签： google-visualization

【解决方案1】：

我过去也使用 google geochart API 构建了一个“政治”地图。这是我用于美国的代码：

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 data.addRows([[{v:'US-AK',f:'Alaska'},0,'Obama (D)']]);
 ivalue['US-AK'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';

 data.addRows([[{v:'US-AL',f:'Alabama'},1,'Obama (D)']]);
 ivalue['US-AL'] = 'Obama (D) will win in Alabama';

 data.addRows([[{v:'US-AR',f:'Arkansas'},2,'Obama (D)']]);
 ivalue['US-AR'] = 'Obama (D) will win in Arkansas';

 data.addRows([[{v:'US-AZ',f:'Arizona'},3,'Obama (D)']]);
 ivalue['US-AZ'] = 'Obama (D) will win in Arizona';

 data.addRows([[{v:'US-CA',f:'California'},4,'Obama (D)']]);
 ivalue['US-CA'] = 'Obama (D) will win in California';

 data.addRows([[{v:'US-CO',f:'Colorado'},5,'Obama (D)']]);
 ivalue['US-CO'] = 'Obama (D) will win in Colorado';

 data.addRows([[{v:'US-CT',f:'Connecticut'},6,'Obama (D)']]);
 ivalue['US-CT'] = 'Obama (D) will win in Connecticut';

 data.addRows([[{v:'US-DE',f:'Delaware'},7,'Obama (D)']]);
 ivalue['US-DE'] = 'Obama (D) will win in Delaware';

 data.addRows([[{v:'US-FL',f:'Florida'},8,'Obama (D)']]);
 ivalue['US-FL'] = 'Obama (D) will win in Florida';

 data.addRows([[{v:'US-GA',f:'Georgia'},9,'Obama (D)']]);
 ivalue['US-GA'] = 'Obama (D) will win in Georgia';

 data.addRows([[{v:'US-HI',f:'Hawaii'},10,'Obama (D)']]);
 ivalue['US-HI'] = 'Obama (D) will win in Hawaii';

 data.addRows([[{v:'US-IA',f:'Iowa'},11,'Obama (D)']]);
 ivalue['US-IA'] = 'Obama (D) will win in Iowa';

 data.addRows([[{v:'US-ID',f:'Idaho'},12,'Obama (D)']]);
 ivalue['US-ID'] = 'Obama (D) will win in Idaho';

 data.addRows([[{v:'US-IL',f:'Illinois'},13,'Obama (D)']]);
 ivalue['US-IL'] = 'Obama (D) will win in Illinois';

 data.addRows([[{v:'US-IN',f:'Indiana'},14,'Obama (D)']]);
 ivalue['US-IN'] = 'Obama (D) will win in Indiana';

 data.addRows([[{v:'US-KS',f:'Kansas'},15,'Obama (D)']]);
 ivalue['US-KS'] = 'Obama (D) will win in Kansas';

 data.addRows([[{v:'US-KY',f:'Kentucky'},16,'Obama (D)']]);
 ivalue['US-KY'] = 'Obama (D) will win in Kentucky';

 data.addRows([[{v:'US-LA',f:'Louisiana'},17,'Obama (D)']]);
 ivalue['US-LA'] = 'Obama (D) will win in Louisiana';

 data.addRows([[{v:'US-MA',f:'Massachusetts'},18,'Obama (D)']]);
 ivalue['US-MA'] = 'Obama (D) will win in Massachusetts';

 data.addRows([[{v:'US-MD',f:'Maryland'},19,'Obama (D)']]);
 ivalue['US-MD'] = 'Obama (D) will win in Maryland';

 data.addRows([[{v:'US-ME',f:'Maine'},20,'Obama (D)']]);
 ivalue['US-ME'] = 'Obama (D) will win in Maine';

 data.addRows([[{v:'US-MI',f:'Michigan'},21,'Obama (D)']]);
 ivalue['US-MI'] = 'Obama (D) will win in Michigan';

 data.addRows([[{v:'US-MN',f:'Minnesota'},22,'Obama (D)']]);
 ivalue['US-MN'] = 'Obama (D) will win in Minnesota';

 data.addRows([[{v:'US-MO',f:'Missouri'},23,'Obama (D)']]);
 ivalue['US-MO'] = 'Obama (D) will win in Missouri';

 data.addRows([[{v:'US-MS',f:'Mississippi'},24,'Obama (D)']]);
 ivalue['US-MS'] = 'Obama (D) will win in Mississippi';

 data.addRows([[{v:'US-MT',f:'Montana'},25,'Obama (D)']]);
 ivalue['US-MT'] = 'Obama (D) will win in Montana';

 data.addRows([[{v:'US-NC',f:'North Carolina'},26,'Romney (R)']]);
 ivalue['US-NC'] = 'Romney (R) will win in North Carolina';

 data.addRows([[{v:'US-ND',f:'North Dakota'},27,'Romney (R)']]);
 ivalue['US-ND'] = 'Romney (R) will win in North Dakota';

 data.addRows([[{v:'US-NE',f:'Nebraska'},28,'Romney (R)']]);
 ivalue['US-NE'] = 'Romney (R) will win in Nebraska';

 data.addRows([[{v:'US-NH',f:'New Hampshire'},29,'Romney (R)']]);
 ivalue['US-NH'] = 'Romney (R) will win in New Hampshire';

 data.addRows([[{v:'US-NJ',f:'New Jersey'},30,'Romney (R)']]);
 ivalue['US-NJ'] = 'Romney (R) will win in New Jersey';

 data.addRows([[{v:'US-NM',f:'New Mexico'},31,'Romney (R)']]);
 ivalue['US-NM'] = 'Romney (R) will win in New Mexico';

 data.addRows([[{v:'US-NV',f:'Nevada'},32,'Romney (R)']]);
 ivalue['US-NV'] = 'Romney (R) will win in Nevada';

 data.addRows([[{v:'US-NY',f:'New York'},33,'Romney (R)']]);
 ivalue['US-NY'] = 'Romney (R) will win in New York';

 data.addRows([[{v:'US-OH',f:'Ohio'},34,'Romney (R)']]);
 ivalue['US-OH'] = 'Romney (R) will win in Ohio';

 data.addRows([[{v:'US-OK',f:'Oklahoma'},35,'Romney (R)']]);
 ivalue['US-OK'] = 'Romney (R) will win in Oklahoma';

 data.addRows([[{v:'US-OR',f:'Oregon'},36,'Romney (R)']]);
 ivalue['US-OR'] = 'Romney (R) will win in Oregon';

 data.addRows([[{v:'US-PA',f:'Pennsylvania'},37,'Romney (R)']]);
 ivalue['US-PA'] = 'Romney (R) will win in Pennsylvania';

 data.addRows([[{v:'US-RI',f:'Rhode Island'},38,'Romney (R)']]);
 ivalue['US-RI'] = 'Romney (R) will win in Rhode Island';

 data.addRows([[{v:'US-SC',f:'South Carolina'},39,'Romney (R)']]);
 ivalue['US-SC'] = 'Romney (R) will win in South Carolina';

 data.addRows([[{v:'US-SD',f:'South Dakota'},40,'Romney (R)']]);
 ivalue['US-SD'] = 'Romney (R) will win in South Dakota';

 data.addRows([[{v:'US-TN',f:'Tennessee'},41,'Romney (R)']]);
 ivalue['US-TN'] = 'Romney (R) will win in Tennessee';

 data.addRows([[{v:'US-TX',f:'Texas'},42,'Undecided']]);
 ivalue['US-TX'] = 'People are Undecided in Texas';

 data.addRows([[{v:'US-UT',f:'Utah'},43,'Undecided']]);
 ivalue['US-UT'] = 'People are Undecided in Utah';

 data.addRows([[{v:'US-VA',f:'Virginia'},44,'Undecided']]);
 ivalue['US-VA'] = 'People are Undecided in Virginia';

 data.addRows([[{v:'US-VT',f:'Vermont'},45,'Undecided']]);
 ivalue['US-VT'] = 'People are Undecided in Vermont';

 data.addRows([[{v:'US-WA',f:'Washington'},46,'Undecided']]);
 ivalue['US-WA'] = 'People are Undecided in Washington';

 data.addRows([[{v:'US-WI',f:'Wisconsin'},47,'Undecided']]);
 ivalue['US-WI'] = 'People are Undecided in Wisconsin';

 data.addRows([[{v:'US-WV',f:'West Virginia'},48,'Undecided']]);
 ivalue['US-WV'] = 'People are Undecided in West Virginia';

 data.addRows([[{v:'US-WY',f:'Wyoming'},49,'Undecided']]);
 ivalue['US-WY'] = 'People are Undecided in Wyoming';

 var options = {
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
 colorAxis:  {minValue: 0, maxValue: 49,  colors: ['#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E']},
 legend: 'none',    
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f5f5f5',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'US',
 keepAspectRatio: true,
 width:600,
 height:400,
 tooltip: {textStyle: {color: '#444444'}, trigger:'hover'}  
 };
  var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
  google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection();
  if (selection.length == 1) {
  var selectedRow = selection[0].row;
  var selectedRegion = data.getValue(selectedRow, 0);
  if(ivalue[selectedRegion] != '') { alert(ivalue[selectedRegion]); }
  }
  });
 chart.draw(data, options);
 }
 </script>
 <div id='visualization'></div>

地图是这样的：

你可以在我的网站上看到它，以及其他带有代码的地理图表地图示例：http://cmoreira.net/interactive-maps-generator/examples.html

【讨论】：

【解决方案2】：

嗯，您应该首先查看此处的 google 的 geochart API： https://developers.google.com/chart/interactive/docs/gallery/geochart

注意选项对象。给它一个设置为“美国”的区域属性和一个“省”的分辨率。像这样的：

var options = {
    region: 'US',
    resolution: 'provinces',
    //other options...,
}

现在这将为您提供状态，但不会为它们着色。为此，您需要为每个状态设置值。这样做：

var state_value_array = [
['State', 'race_state'],
['Georgia', 3],
['Alabama, 3],
['New Mexico, 1],
//Other 47 states...,
];

第一个值是状态，第二个是它携带的着色值。要获得您想要的颜色，您必须稍微处理一下数据，然后设置您想要的颜色范围。

options['colorAxis'] = {colors: ['blue', 'grey', 'red']};

在图表对象上调用 draw 并将 state_value_array 数组传递给 arrayToDataTable 对象，一切都应该没问题。

【讨论】：

【解决方案3】：

要将每个状态的区域颜色设置为下图，您必须在选项对象中使用颜色属性。试试下面的代码

var data = google.visualization.arrayToDataTable([
            ['Country', 'Site'],
            ['Alabama', 0],
            ['Alaska', 1],
            ['American Samoa', 2],
            ['Arizona', 3],
            ['Arkansas', 4],
            ['California', 5],
            ['Colorado', 6],
            ['Connecticut', 7],
            ['Delaware', 8],
            ['District of Columbia', 9]
]);


var options = {width: 556, height: 347};
    options['region'] = 'US';
    options['resolution'] = 'provinces';
    options['colors'] = ['#4bb5f3', '#FADC41', '#c44949', '#d74a12', '#0e9a0e', '#55c2ac', '#7c4b91', '#fadc41', '#0d6cca', '#7c4897'];

看看这个有工作样本的jqfaq.com

【讨论】：

Swarma -- 欢迎来到 StackOverflow！最佳答案将包含代码或解释，这些代码或解释会添加到此处尚未出现的答案。解释如何使用它对未来的访问者来说比仅仅发布链接更有用。请参阅 CMoreira's answer 或 shefHauwanga's answer 以获得很好的示例！