为彩色世界地图添加图例

Posted 2023-02-16

【中文标题】为彩色世界地图添加图例

【英文标题】：Add legend to colored worldmap

【发布时间】：2016-10-14 10:34:01

【问题描述】：

各位程序员大家好！我正在尝试在我的交互式世界地图中添加一个图例，但没有这样做。我应该/可以使用哪些功能？直到现在，我尝试的一切最终都没有显示出来。任何帮助将不胜感激！谢谢！

世界地图代码：

new Datamap(
  scope: 'world',
  done: function(datamap) 
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) 
      var country = geography.id
      window.country = country
      console.log(country);
      ScatterCorruption()
      Barchart()
  );
,
element: document.getElementById('container1'),
fills: 
 A: '#c6dbef',
 B: '#9ecae1',
 C: '#6baed6',
 D: '#4292c6',
 E: '#2171b5',
 F: '#08519c',
 G: '#08306b',
 defaultFill: 'grey' 
,
geographyConfig: 
    borderColor: 'rgba(255,255,255,0.3)',
    highlightBorderColor: 'rgba(0,0,0,0.5)',
    popupTemplate: function(geo, data) 
      return data && data.GDP ?
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP: <strong> $ ' + data.GDP + '</strong></div>' :
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>';
  
,
data: 
    "ABW": 
        "country": "Aruba",
        "fillKey": "No data",
        "GDP": "No data"
    ,
    "AND": 
        "country": "Andorra",
        "fillKey": "No data",
        "GDP": "No data"
    ,
    "AFG": 
        "country": "Afghanistan",
        "fillKey": "D",
        "GDP": "20038215159.39"
    ,
    "AGO": 
        "country": "Angola",
        "fillKey": "No data",
        "GDP": "No data"
    ,
    "ALB": 
        "country": "Albania",
        "fillKey": "D",
        "GDP": "13211513725.59"
    ,
    "ARE": 
        "country": "United Arab Emirates",
        "fillKey": "E",
        "GDP": "399451327433.63"
    ,
...
,
);

【参考方案1】：

只需调用legend()方法

var map = new Datamap( scope: 'world', xxxx: xxxx); map.legend(); 您还可以使用指定图例标题和数据标签 var l = legendTitle: "My Legend Title", defaultFillName: "Nodata", labels: someLabels ; 您可以将其称为map.legend(l);

希望这会有所帮助... :)