0
안녕하세요 동료 프로그래머! 나는 인터랙티브 월드 맵에 범례를 추가하려하지만 그렇게하지 못한다. 어떤 기능을 사용해야합니까? 지금까지 시도한 모든 것은 아무것도 보여주지 못했습니다. 어떤 도움이라도 대단히 감사하겠습니다! 감사!컬러 월드 맵에 범례 추가
맵에 코드 :
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"
},
...
},
});