如何根據給定的一組值爲每個國家分配顏色

Question

我必須創建美國地區的GeoChart。目前分配給每個國家的顏色取決於漸變中的colorAxis.color。有沒有什麼方法可以根據給定的值範圍爲每個國家指定顏色。例如： 0-20之間的數值有紅色 21-40之間的數值有黃色 和兒子上？在這個問題上的任何幫助表示讚賞。謝謝。

Answer 1

看來，如果一種顏色的名稱爲每個值提供，使用梯度可以覆蓋...

colorAxis: { 
    colors: colorNames, // array of color names -- one for each value 
    values: colorValues // array of values extracted from the data and sorted ascending 
    }, 

在這裏，我調整範圍與從GeoChart例子中的數據匹配.. 。
red <= -10 > yellow <= 10 > green

google.charts.load('44', {'packages':['geochart']}); 
 
google.charts.setOnLoadCallback(drawRegionsMap); 
 

 
function drawRegionsMap() { 
 
    var dataRows = [ 
 
    ['Country', 'Latitude'], 
 
    ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24], 
 
    ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3], 
 
    ['Canary Islands', 28], ['Cape Verde', 15], 
 
    ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12], 
 
    ['Comoros', -12], ['Cote d\'Ivoire', 6], 
 
    ['Democratic Republic of the Congo', -3], ['Djibouti', 12], 
 
    ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15], 
 
    ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5], 
 
    ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1], 
 
    ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', 13], 
 
    ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18], 
 
    ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35], 
 
    ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22], 
 
    ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1], 
 
    ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16], 
 
    ['São Tomé and Principe', 0], ['Senegal', 15], 
 
    ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2], 
 
    ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5], 
 
    ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34], 
 
    ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15], 
 
    ['Zimbabwe', -18] 
 
    ]; 
 

 
    // extract column index 1 for color values 
 
    var colorValues = dataRows.map(function(val){ 
 
     return val.slice(-1); 
 
    }); 
 
    // remove column label 
 
    colorValues.splice(0, 1); 
 
    // sort ascending 
 
    colorValues.sort(function(a, b){return a-b}); 
 

 
    // build color names red <= -10 > yellow <= 10 > green 
 
    var colorNames = []; 
 
    colorValues.forEach(function(value) { 
 
    if (value <= -10) { 
 
     colorNames.push('red'); 
 
    } else if ((value > -10) && (value <= 10)) { 
 
     colorNames.push('yellow'); 
 
    } else { 
 
     colorNames.push('green'); 
 
    } 
 
    }); 
 

 
    var data = google.visualization.arrayToDataTable(dataRows); 
 

 
    var options = { 
 
    region: '002', 
 
    colorAxis: { 
 
     colors: colorNames, 
 
     values: colorValues 
 
    }, 
 
    backgroundColor: '#81d4fa', 
 
    datalessRegionColor: '#f8bbd0', 
 
    defaultColor: '#f5f5f5', 
 
    }; 
 

 
    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); 
 
    chart.draw(data, options); 
 
};

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://www.google.com/jsapi"></script> 
 
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>