我在页面上有一个国家/地区代码列表，并希望根据列表中的某个国家/地区iso-a2项目在地图上显示该国家/地区。
$('li').click(function() {
var ctry = $(this).text();
$('#container').highcharts().get(ctry).setState('hover');
})
<ul>
<li>AL</li>
<li>AD</li>
<li>AM</li>
</ul>
我有fiddle here。
我的地图代码是：
var chartData = [{
"name": "Africa",
"data": [{
"code": "DZ"
}, {
"code": "AO"
}, {
"code": "BJ"
}, {
"code": "BW"
}, {
"code": "BF"
}, {
"code": "BI"
}, {
"code": "CM"
}, {
"code": "CV"
}, {
"code": "CF"
}, {
"code": "TD"
}, {
"code": "CD"
}, {
"code": "CG"
}, {
"code": "KM"
}, {
"code": "DJ"
}, {
"code": "EG"
}, {
"code": "GQ"
}, {
"code": "ER"
}, {
"code": "ET"
}, {
"code": "GM"
}, {
"code": "GA"
}, {
"code": "GH"
}, {
"code": "GN"
}, {
"code": "GW"
}, {
"code": "CI"
}, {
"code": "KE"
}, {
"code": "XK"
}, {
"code": "LS"
}, {
"code": "LR"
}, {
"code": "LY"
}, {
"code": "MG"
}, {
"code": "MW"
}, {
"code": "ML"
}, {
"code": "MR"
}, {
"code": "MU"
}, {
"code": "YT"
}, {
"code": "MA"
}, {
"code": "MZ"
}, {
"code": "NA"
}, {
"code": "NE"
}, {
"code": "NG"
}, {
"code": "RW"
}, {
"code": "ST"
}, {
"code": "SN"
}, {
"code": "SC"
}, {
"code": "SL"
}, {
"code": "SO"
}, {
"code": "ZA"
}, {
"code": "SS"
}, {
"code": "SD"
}, {
"code": "SZ"
}, {
"code": "TZ"
}, {
"code": "TG"
}, {
"code": "TN"
}, {
"code": "UG"
}, {
"code": "EH"
}, {
"code": "ZM"
}, {
"code": "ZW"
}]
}, {
"name": "Asia",
"data": [{
"code": "AF"
}, {
"code": "BH"
}, {
"code": "BD"
}, {
"code": "BT"
}, {
"code": "BN"
}, {
"code": "KH"
}, {
"code": "CN"
}, {
"code": "HK"
}, {
"code": "IN"
}, {
"code": "ID"
}, {
"code": "IR"
}, {
"code": "IQ"
}, {
"code": "IL"
}, {
"code": "JP"
}, {
"code": "JO"
}, {
"code": "KZ"
}, {
"code": "KW"
}, {
"code": "KG"
}, {
"code": "LA"
}, {
"code": "LB"
}, {
"code": "MO"
}, {
"code": "MY"
}, {
"code": "MV"
}, {
"code": "MN"
}, {
"code": "MM"
}, {
"code": "NP"
}, {
"code": "KP"
}, {
"code": "OM"
}, {
"code": "PK"
}, {
"code": "PH"
}, {
"code": "WA"
}, {
"code": "SA"
}, {
"code": "SG"
}, {
"code": "KR"
}, {
"code": "LK"
}, {
"code": "SY"
}, {
"code": "TW"
}, {
"code": "TJ"
}, {
"code": "TH"
}, {
"code": "TR"
}, {
"code": "TM"
}, {
"code": "AE"
}, {
"code": "UZ"
}, {
"code": "VN"
}, {
"code": "PS"
}, {
"code": "YE"
}]
}, {
"name": "Europe",
"data": [{
"code": "AL"
}, {
"code": "AD"
}, {
"code": "AM"
}, {
"code": "AT"
}, {
"code": "AZ"
}, {
"code": "BY"
}, {
"code": "BE"
}, {
"code": "BA"
}, {
"code": "BG"
}, {
"code": "HR"
}, {
"code": "CY"
}, {
"code": "CZ"
}, {
"code": "DK"
}, {
"code": "EE"
}, {
"code": "FO"
}, {
"code": "FI"
}, {
"code": "FR"
}, {
"code": "GE"
}, {
"code": "DE"
}, {
"code": "GR"
}, {
"code": "HU"
}, {
"code": "IS"
}, {
"code": "IE"
}, {
"code": "IM"
}, {
"code": "IT"
}, {
"code": "LV"
}, {
"code": "LI"
}, {
"code": "LT"
}, {
"code": "LU"
}, {
"code": "MK"
}, {
"code": "MT"
}, {
"code": "MD"
}, {
"code": "MC"
}, {
"code": "ME"
}, {
"code": "NL"
}, {
"code": "NO"
}, {
"code": "PL"
}, {
"code": "PT"
}, {
"code": "RO"
}, {
"code": "RU"
}, {
"code": "SM"
}, {
"code": "RS"
}, {
"code": "SK"
}, {
"code": "SI"
}, {
"code": "ES"
}, {
"code": "SE"
}, {
"code": "CH"
}, {
"code": "UA"
}, {
"code": "GB"
}, {
"code": "VA"
}]
}, {
"name": "North America",
"data": [{
"code": "AI"
}, {
"code": "BS"
}, {
"code": "BB"
}, {
"code": "BZ"
}, {
"code": "BM"
}, {
"code": "CA"
}, {
"code": "KY"
}, {
"code": "CR"
}, {
"code": "CU"
}, {
"code": "DM"
}, {
"code": "DO"
}, {
"code": "SV"
}, {
"code": "GL"
}, {
"code": "GD"
}, {
"code": "GT"
}, {
"code": "HT"
}, {
"code": "HN"
}, {
"code": "JM"
}, {
"code": "MX"
}, {
"code": "FM"
}, {
"code": "NI"
}, {
"code": "PA"
}, {
"code": "PR"
}, {
"code": "KN"
}, {
"code": "LC"
}, {
"code": "VC"
}, {
"code": "TC"
}, {
"code": "US"
}, {
"code": "VI"
}, {
"code": "VG"
}, {
"code": "TT"
}]
}, {
"name": "South America",
"data": [{
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "TT"
}, {
"code": "UY"
}, {
"code": "VE"
}, {
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "UY"
}, {
"code": "VE"
}]
}, {
"name": "Oceania",
"data": [{
"code": "AS"
}, {
"code": "AU"
}, {
"code": "FJ"
}, {
"code": "GU"
}, {
"code": "KI"
}, {
"code": "MH"
}, {
"code": "NC"
}, {
"code": "NZ"
}, {
"code": "MP"
}, {
"code": "PW"
}, {
"code": "PG"
}, {
"code": "WS"
}, {
"code": "SB"
}, {
"code": "TP"
}, {
"code": "TO"
}, {
"code": "TV"
}, {
"code": "VU"
}]
}];
// Instantiate the map
var chart = Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Regions'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: chartData
});
$('li').click(function() {
var ctry = $(this).text();
$('#container').highcharts().get(ctry).setState('hover');
})
答案 0 :(得分：0)
您可以通过迭代图表系列数据并更新匹配的数据颜色来实现所需的效果
$('li').click(function() {
var ctry = $(this).text();
chart.series.map((el,i)=>{
el.data.map((e,j)=>{
if(e.code==ctry){
chart.series[i].data[j].update({
color: 'red'
})
}
})
})
})
var chart;
var chartData = [{
"name": "Africa",
"data": [{
"code": "DZ"
}, {
"code": "AO"
}, {
"code": "BJ"
}, {
"code": "BW"
}, {
"code": "BF"
}, {
"code": "BI"
}, {
"code": "CM"
}, {
"code": "CV"
}, {
"code": "CF"
}, {
"code": "TD"
}, {
"code": "CD"
}, {
"code": "CG"
}, {
"code": "KM"
}, {
"code": "DJ"
}, {
"code": "EG"
}, {
"code": "GQ"
}, {
"code": "ER"
}, {
"code": "ET"
}, {
"code": "GM"
}, {
"code": "GA"
}, {
"code": "GH"
}, {
"code": "GN"
}, {
"code": "GW"
}, {
"code": "CI"
}, {
"code": "KE"
}, {
"code": "XK"
}, {
"code": "LS"
}, {
"code": "LR"
}, {
"code": "LY"
}, {
"code": "MG"
}, {
"code": "MW"
}, {
"code": "ML"
}, {
"code": "MR"
}, {
"code": "MU"
}, {
"code": "YT"
}, {
"code": "MA"
}, {
"code": "MZ"
}, {
"code": "NA"
}, {
"code": "NE"
}, {
"code": "NG"
}, {
"code": "RW"
}, {
"code": "ST"
}, {
"code": "SN"
}, {
"code": "SC"
}, {
"code": "SL"
}, {
"code": "SO"
}, {
"code": "ZA"
}, {
"code": "SS"
}, {
"code": "SD"
}, {
"code": "SZ"
}, {
"code": "TZ"
}, {
"code": "TG"
}, {
"code": "TN"
}, {
"code": "UG"
}, {
"code": "EH"
}, {
"code": "ZM"
}, {
"code": "ZW"
}]
}, {
"name": "Asia",
"data": [{
"code": "AF"
}, {
"code": "BH"
}, {
"code": "BD"
}, {
"code": "BT"
}, {
"code": "BN"
}, {
"code": "KH"
}, {
"code": "CN"
}, {
"code": "HK"
}, {
"code": "IN"
}, {
"code": "ID"
}, {
"code": "IR"
}, {
"code": "IQ"
}, {
"code": "IL"
}, {
"code": "JP"
}, {
"code": "JO"
}, {
"code": "KZ"
}, {
"code": "KW"
}, {
"code": "KG"
}, {
"code": "LA"
}, {
"code": "LB"
}, {
"code": "MO"
}, {
"code": "MY"
}, {
"code": "MV"
}, {
"code": "MN"
}, {
"code": "MM"
}, {
"code": "NP"
}, {
"code": "KP"
}, {
"code": "OM"
}, {
"code": "PK"
}, {
"code": "PH"
}, {
"code": "WA"
}, {
"code": "SA"
}, {
"code": "SG"
}, {
"code": "KR"
}, {
"code": "LK"
}, {
"code": "SY"
}, {
"code": "TW"
}, {
"code": "TJ"
}, {
"code": "TH"
}, {
"code": "TR"
}, {
"code": "TM"
}, {
"code": "AE"
}, {
"code": "UZ"
}, {
"code": "VN"
}, {
"code": "PS"
}, {
"code": "YE"
}]
}, {
"name": "Europe",
"data": [{
"code": "AL"
}, {
"code": "AD"
}, {
"code": "AM"
}, {
"code": "AT"
}, {
"code": "AZ"
}, {
"code": "BY"
}, {
"code": "BE"
}, {
"code": "BA"
}, {
"code": "BG"
}, {
"code": "HR"
}, {
"code": "CY"
}, {
"code": "CZ"
}, {
"code": "DK"
}, {
"code": "EE"
}, {
"code": "FO"
}, {
"code": "FI"
}, {
"code": "FR"
}, {
"code": "GE"
}, {
"code": "DE"
}, {
"code": "GR"
}, {
"code": "HU"
}, {
"code": "IS"
}, {
"code": "IE"
}, {
"code": "IM"
}, {
"code": "IT"
}, {
"code": "LV"
}, {
"code": "LI"
}, {
"code": "LT"
}, {
"code": "LU"
}, {
"code": "MK"
}, {
"code": "MT"
}, {
"code": "MD"
}, {
"code": "MC"
}, {
"code": "ME"
}, {
"code": "NL"
}, {
"code": "NO"
}, {
"code": "PL"
}, {
"code": "PT"
}, {
"code": "RO"
}, {
"code": "RU"
}, {
"code": "SM"
}, {
"code": "RS"
}, {
"code": "SK"
}, {
"code": "SI"
}, {
"code": "ES"
}, {
"code": "SE"
}, {
"code": "CH"
}, {
"code": "UA"
}, {
"code": "GB"
}, {
"code": "VA"
}]
}, {
"name": "North America",
"data": [{
"code": "AI"
}, {
"code": "BS"
}, {
"code": "BB"
}, {
"code": "BZ"
}, {
"code": "BM"
}, {
"code": "CA"
}, {
"code": "KY"
}, {
"code": "CR"
}, {
"code": "CU"
}, {
"code": "DM"
}, {
"code": "DO"
}, {
"code": "SV"
}, {
"code": "GL"
}, {
"code": "GD"
}, {
"code": "GT"
}, {
"code": "HT"
}, {
"code": "HN"
}, {
"code": "JM"
}, {
"code": "MX"
}, {
"code": "FM"
}, {
"code": "NI"
}, {
"code": "PA"
}, {
"code": "PR"
}, {
"code": "KN"
}, {
"code": "LC"
}, {
"code": "VC"
}, {
"code": "TC"
}, {
"code": "US"
}, {
"code": "VI"
}, {
"code": "VG"
}, {
"code": "TT"
}]
}, {
"name": "South America",
"data": [{
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "TT"
}, {
"code": "UY"
}, {
"code": "VE"
}, {
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "UY"
}, {
"code": "VE"
}]
}, {
"name": "Oceania",
"data": [{
"code": "AS"
}, {
"code": "AU"
}, {
"code": "FJ"
}, {
"code": "GU"
}, {
"code": "KI"
}, {
"code": "MH"
}, {
"code": "NC"
}, {
"code": "NZ"
}, {
"code": "MP"
}, {
"code": "PW"
}, {
"code": "PG"
}, {
"code": "WS"
}, {
"code": "SB"
}, {
"code": "TP"
}, {
"code": "TO"
}, {
"code": "TV"
}, {
"code": "VU"
}]
}];
// Instantiate the map
chart = Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Regions'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: chartData
});
$('li').click(function() {
var ctry = $(this).text();
chart.series.map((el, i) => {
el.data.map((e, j) => {
if (e.code == ctry) {
chart.series[i].data[j].update({
color: 'red'
})
}
})
})
})<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<ul>
<li>IN</li>
<li>RU</li>
<li>CN</li>
</ul>
<br/>
<br/>
<div id="container"></div>
Fiddle演示
修改
Based of revision我认为点击你想要更改颜色加上显示工具提示，并且在悬停时你想要改变各个地图的颜色。
注意此示例激活国家/地区的颜色在焦点失焦时恢复原始颜色（国家/地区更改时）
var chart;
var chartData = [{
"name": "Africa",
"data": [{
"code": "DZ"
}, {
"code": "AO"
}, {
"code": "BJ"
}, {
"code": "BW"
}, {
"code": "BF"
}, {
"code": "BI"
}, {
"code": "CM"
}, {
"code": "CV"
}, {
"code": "CF"
}, {
"code": "TD"
}, {
"code": "CD"
}, {
"code": "CG"
}, {
"code": "KM"
}, {
"code": "DJ"
}, {
"code": "EG"
}, {
"code": "GQ"
}, {
"code": "ER"
}, {
"code": "ET"
}, {
"code": "GM"
}, {
"code": "GA"
}, {
"code": "GH"
}, {
"code": "GN"
}, {
"code": "GW"
}, {
"code": "CI"
}, {
"code": "KE"
}, {
"code": "XK"
}, {
"code": "LS"
}, {
"code": "LR"
}, {
"code": "LY"
}, {
"code": "MG"
}, {
"code": "MW"
}, {
"code": "ML"
}, {
"code": "MR"
}, {
"code": "MU"
}, {
"code": "YT"
}, {
"code": "MA"
}, {
"code": "MZ"
}, {
"code": "NA"
}, {
"code": "NE"
}, {
"code": "NG"
}, {
"code": "RW"
}, {
"code": "ST"
}, {
"code": "SN"
}, {
"code": "SC"
}, {
"code": "SL"
}, {
"code": "SO"
}, {
"code": "ZA"
}, {
"code": "SS"
}, {
"code": "SD"
}, {
"code": "SZ"
}, {
"code": "TZ"
}, {
"code": "TG"
}, {
"code": "TN"
}, {
"code": "UG"
}, {
"code": "EH"
}, {
"code": "ZM"
}, {
"code": "ZW"
}]
}, {
"name": "Asia",
"data": [{
"code": "AF"
}, {
"code": "BH"
}, {
"code": "BD"
}, {
"code": "BT"
}, {
"code": "BN"
}, {
"code": "KH"
}, {
"code": "CN"
}, {
"code": "HK"
}, {
"code": "IN"
}, {
"code": "ID"
}, {
"code": "IR"
}, {
"code": "IQ"
}, {
"code": "IL"
}, {
"code": "JP"
}, {
"code": "JO"
}, {
"code": "KZ"
}, {
"code": "KW"
}, {
"code": "KG"
}, {
"code": "LA"
}, {
"code": "LB"
}, {
"code": "MO"
}, {
"code": "MY"
}, {
"code": "MV"
}, {
"code": "MN"
}, {
"code": "MM"
}, {
"code": "NP"
}, {
"code": "KP"
}, {
"code": "OM"
}, {
"code": "PK"
}, {
"code": "PH"
}, {
"code": "WA"
}, {
"code": "SA"
}, {
"code": "SG"
}, {
"code": "KR"
}, {
"code": "LK"
}, {
"code": "SY"
}, {
"code": "TW"
}, {
"code": "TJ"
}, {
"code": "TH"
}, {
"code": "TR"
}, {
"code": "TM"
}, {
"code": "AE"
}, {
"code": "UZ"
}, {
"code": "VN"
}, {
"code": "PS"
}, {
"code": "YE"
}]
}, {
"name": "Europe",
"data": [{
"code": "AL"
}, {
"code": "AD"
}, {
"code": "AM"
}, {
"code": "AT"
}, {
"code": "AZ"
}, {
"code": "BY"
}, {
"code": "BE"
}, {
"code": "BA"
}, {
"code": "BG"
}, {
"code": "HR"
}, {
"code": "CY"
}, {
"code": "CZ"
}, {
"code": "DK"
}, {
"code": "EE"
}, {
"code": "FO"
}, {
"code": "FI"
}, {
"code": "FR"
}, {
"code": "GE"
}, {
"code": "DE"
}, {
"code": "GR"
}, {
"code": "HU"
}, {
"code": "IS"
}, {
"code": "IE"
}, {
"code": "IM"
}, {
"code": "IT"
}, {
"code": "LV"
}, {
"code": "LI"
}, {
"code": "LT"
}, {
"code": "LU"
}, {
"code": "MK"
}, {
"code": "MT"
}, {
"code": "MD"
}, {
"code": "MC"
}, {
"code": "ME"
}, {
"code": "NL"
}, {
"code": "NO"
}, {
"code": "PL"
}, {
"code": "PT"
}, {
"code": "RO"
}, {
"code": "RU"
}, {
"code": "SM"
}, {
"code": "RS"
}, {
"code": "SK"
}, {
"code": "SI"
}, {
"code": "ES"
}, {
"code": "SE"
}, {
"code": "CH"
}, {
"code": "UA"
}, {
"code": "GB"
}, {
"code": "VA"
}]
}, {
"name": "North America",
"data": [{
"code": "AI"
}, {
"code": "BS"
}, {
"code": "BB"
}, {
"code": "BZ"
}, {
"code": "BM"
}, {
"code": "CA"
}, {
"code": "KY"
}, {
"code": "CR"
}, {
"code": "CU"
}, {
"code": "DM"
}, {
"code": "DO"
}, {
"code": "SV"
}, {
"code": "GL"
}, {
"code": "GD"
}, {
"code": "GT"
}, {
"code": "HT"
}, {
"code": "HN"
}, {
"code": "JM"
}, {
"code": "MX"
}, {
"code": "FM"
}, {
"code": "NI"
}, {
"code": "PA"
}, {
"code": "PR"
}, {
"code": "KN"
}, {
"code": "LC"
}, {
"code": "VC"
}, {
"code": "TC"
}, {
"code": "US"
}, {
"code": "VI"
}, {
"code": "VG"
}, {
"code": "TT"
}]
}, {
"name": "South America",
"data": [{
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "TT"
}, {
"code": "UY"
}, {
"code": "VE"
}, {
"code": "AR"
}, {
"code": "AW"
}, {
"code": "BO"
}, {
"code": "BR"
}, {
"code": "CL"
}, {
"code": "CO"
}, {
"code": "CW"
}, {
"code": "EC"
}, {
"code": "PF"
}, {
"code": "GF"
}, {
"code": "GY"
}, {
"code": "PY"
}, {
"code": "PE"
}, {
"code": "MF"
}, {
"code": "SR"
}, {
"code": "UY"
}, {
"code": "VE"
}]
}, {
"name": "Oceania",
"data": [{
"code": "AS"
}, {
"code": "AU"
}, {
"code": "FJ"
}, {
"code": "GU"
}, {
"code": "KI"
}, {
"code": "MH"
}, {
"code": "NC"
}, {
"code": "NZ"
}, {
"code": "MP"
}, {
"code": "PW"
}, {
"code": "PG"
}, {
"code": "WS"
}, {
"code": "SB"
}, {
"code": "TP"
}, {
"code": "TO"
}, {
"code": "TV"
}, {
"code": "VU"
}]
}];
// Instantiate the map
chart = Highcharts.mapChart('container', {
credits: {
enabled: false
},
chart: {
map: 'custom/world',
spacingTop: 20,
spacingBottom: 20,
backgroundColor: '#DEEFF5'
},
title: {
text: 'Regions'
},
legend: {
enabled: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series: chartData
});
$('li').click(function() {
var ctry = $(this).text();
chart.series.map((el, i) => {
el.data.map((e, j) => {
if (e.code == 'AL' || e.code == 'AD' || e.code == 'AM') {
chart.series[i].data[j].update({
color: '#90ed7d'
})
}
if (e.code == ctry) {
chart.series[i].data[j].update({
color: 'red'
})
chart.series[i].data[j].setState('hover');
chart.tooltip.refresh(chart.series[i].points[j]);
}
})
})
})
$('li').hover(function() {
var ctry = $(this).text();
chart.series.map((el, i) => {
el.data.map((e, j) => {
if (e.code == ctry) {
chart.series[i].data[j].update({
color: 'red'
})
}
})
})
})#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
ul li:hover {
cursor: pointer;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<ul>
<li>AL</li>
<li>AD</li>
<li>AM</li>
</ul>
<div id="container"></div>