Làm cách nào để đặt Màu vùng cho từng trạng thái trong Geochart?

Question

tôi muốn đặt màu vùng cho từng tiểu bang ở Hoa Kỳ như trong hình ảnh? là nó có thể trong geochart?

Vui lòng hướng dẫn tôi làm điều đó.

Cảm ơn & Trân trọng, Ranjith Kumar.

Answer 1

Vâng, nơi đầu tiên bạn nên xem xét là API geochart google tìm thấy ở đây: https://developers.google.com/chart/interactive/docs/gallery/geochart

Lưu ý các tùy chọn đối tượng. Đặt cho nó một tài sản của khu vực được đặt thành 'Hoa Kỳ' và độ phân giải của 'tỉnh'. Một cái gì đó như thế này:

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

Bây giờ điều này sẽ giúp bạn có được trạng thái, nhưng nó sẽ không tô màu chúng. Để làm điều đó bạn sẽ cần phải thiết lập các giá trị cho mỗi trạng thái. Làm như sau:

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

Giá trị đầu tiên là trạng thái và giá trị thứ hai là giá trị mang màu. Để có được màu bạn muốn, bạn sẽ phải massage dữ liệu một chút rồi thiết lập phạm vi màu bạn muốn.

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

Vẽ cuộc gọi trên đối tượng biểu đồ và chuyển mảng state_value_array đến đối tượng arrayToDataTable và mọi thứ sẽ ổn.

Answer 2

Để đặt màu khu vực cho mỗi tiểu bang như hình ảnh bên dưới, bạn phải sử dụng màu sắc bất động sản trong các tùy chọn object.Try này mã dưới đây

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']; 

Hãy xem jqfaq.com này mà có một mẫu làm việc

Answer 3

Tôi cũng đã xây dựng một bản đồ 'chính trị' trong quá khứ với API địa lý google. Dưới đây là đoạn code tôi sử dụng đối với Mỹ:

<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> 

Đây là cách bản đồ trông giống như:

Bạn có thể nhìn thấy nó trong hành động sống ở đây trên trang web của tôi, cùng với geochart khác ví dụ về bản đồ có mã: http://cmoreira.net/interactive-maps-generator/examples.html