Jak mogę ustawić kolor regionu dla każdego stanu w Geochart?

Question

Chcę ustawić kolor regionu dla każdego stanu w Stanach Zjednoczonych, jak na obrazku? jest to możliwe w geochart?

Proszę mnie o to poproszę.

Dzięki & Pozdrawiam, Ranjith Kumar.

Answer 1

Cóż, pierwsze miejsce należy szukać w google jest za geochart API znaleźć tutaj: https://developers.google.com/chart/interactive/docs/gallery/geochart

Uwaga opcje obiektu. Nadaj mu właściwość regionu ustawionego na "USA" i rezolucję "prowincji". Coś takiego:

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

Teraz dostaniesz państw, ale ich nie pokoloruje. Aby to zrobić, musisz ustawić wartości dla każdego stanu. Zrób to w ten sposób:

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

Pierwsza wartość to stan, a druga to wartość, którą przenosi do barwienia. Aby uzyskać pożądaną kolorystykę, należy nieco masować dane, a następnie ustawić pożądany zakres kolorów.

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

połączeń remis na obiekt wykresu i przekazać state_value_array tablicę do arrayToDataTable obiektu i wszystko powinno być w porządku.

Answer 2

Aby ustawić kolor dla każdego regionu stanie jak na poniższym obrazie trzeba używać kolorów nieruchomości w opcjach object.Try to poniżej kod

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

Spójrz na tego jqfaq.com który ma próbkę roboczą

Answer 3

Mam również wbudowaną mapę "polityczną" również za pomocą interfejsu Google GeoGuard API. Oto kod użyłem do USA:

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

To jest jak mapa wygląda następująco:

Można zobaczyć go w akcji na żywo tutaj na mojej stronie internetowej, wraz z innymi geochart przykłady map z kodami: http://cmoreira.net/interactive-maps-generator/examples.html