如何根据一组给定的值为每个国家/地区分配颜色

Question

我必须创建一个美国地区的地理图表。 目前分配给每个国家/地区的颜色取决于渐变中的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
  },

在这里，我调整范围以与地理图表示例中的数据相匹配......
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>