Question

我需要用列表中指定的唯一颜色填充每个国家/地区，并将地图名称及其颜色显示为地图下方的图例。如附带此图片所示。任何帮助将不胜感激。

    <html>
     <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['geochart'],
            // Note: you will need to get a mapsApiKey for your project.
            // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
            'mapsApiKey': 'AIzaSyBSJt5Ja1t7FFBGb_CZYKzFbTOCIX-nTWs&callback'
        });
        google.charts.setOnLoadCallback(drawRegionsMap);



        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
                ['Country', 'value'],
                ['IN', 28],
                ['US', 40],
                ['AT', 15],
                ['CA', 10],
                ['CN', 5]

            ]);

            var options = {              
                colors: ['red', 'green', 'orange', 'blue', 'yellow']


            };

            var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
            chart.draw(data, options);                
        };
    </script>
</head>
<body>
    <div id="geochart-colors" style="width: 700px; height: 433px;"></div>
</body>
</html>

Answer 1

为了使用GeoChart为每个国家/地区指定唯一的颜色，
每个国家都需要一个独特的价值

colorAxis允许您为特定值指定颜色，
使用colorAxis.colors和colorAxis.values选项

values中的第一个值将被分配colors中的第一个颜色，
在以下示例中，0 = 'red'，1 = 'green'等等......

colorAxis: {
  colors: ['red', 'green', 'orange', 'blue', 'yellow'],
  values: [0, 1, 2, 3, 4]
}

确保每个国家的独特价值，
将国家/地区的值更改为行索引，
并将国家/地区的实际值设置为数据表格单元格的格式化值这样就可以在悬停时看到国家/地区的实际价值

for (var i = 0; i < data.getNumberOfRows(); i++) {
  var countryValue = data.getValue(i, 1);
  data.setValue(i, 1, i);
  data.setFormattedValue(i, 1, countryValue + '%');
}

您将需要与数据表中的行相同数量的颜色

对于传奇，您必须手动构建，
请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'value'],
    ['IN', 28],
    ['US', 40],
    ['AT', 15],
    ['CA', 10],
    ['CN', 5]
  ]);

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var countryValue = data.getValue(i, 1);
    data.setValue(i, 1, i);
    data.setFormattedValue(i, 1, countryValue + '%');
  }

  var options = {
    colorAxis: {
      colors: ['red', 'green', 'orange', 'blue', 'yellow'],
      values: [0, 1, 2, 3, 4]
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');
    legend.innerHTML = '';

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      addLegendMarker({
        color: options.colorAxis.colors[i],
        label: data.getValue(i, 0) + ' ' + data.getFormattedValue(i, 1)
      });
    }

    function addLegendMarker(markerProps) {
      var legendMarker = document.getElementById('template-legend-marker').innerHTML;
      for (var handle in markerProps) {
        if (markerProps.hasOwnProperty(handle)) {
          legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
        }
      }
      legend.insertAdjacentHTML('beforeEnd', legendMarker);
    }
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

＆＃13;

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

.legend {
  bottom: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1000;
}

.legend-marker {
  display: inline-block;
  padding: 6px 6px 6px 6px;
}

.legend-marker-color {
  border-radius: 25%;
  display: inline-block;
  height: 16px;
  width: 16px;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="legend" id="legend_div"></div>
<div class="chart" id="chart_div"></div>

<script id="template-legend-marker" type="text/html">
  <div class="legend-marker">
    <span class="legend-marker-color" style="background-color: {{color}}">&nbsp;</span>
    <span>{{label}}</span>
  </div>
</script>

＆＃13;

Geochart填充具有独特颜色的国家/地区，并以其颜色作为图例显示国家/地区名称

1 个答案: