Question

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

世界地图代码：

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"
    },
...
},
});

Answer 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);

希望这有助于......：）

将图例添加到彩色世界地图

1 个答案: