匹配两个不同数组中的两个项目
Matching two items in two different arrays
我正在使用 Jvectormap 并将数组设置为 "areas" 以将国家分组在一起以供选择,这很有效。下一步是为数组中的每个国家指定颜色。所以我可以为每个数组中的每个国家/地区定义不同的颜色。
英国在数组 1 中可能是粉红色,但在数组 2 中可能是绿色。
还有我如何分配给点击功能:
$("#mp-cyprus-A").click(function(){
$('#world-map').vectorMap('setSelectedRegions', ['areas[1]']);
});
添加区域集然后为每个区域添加颜色集的代码:
//MAP CONTROLS
$(function(){
var areas = [];
areas[0] = [];
areas[2] = ["FR","BG","DK","HR","DE","BA","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
areas[2] = ["BE","FR","BG","DK","HR","DE","BA","HU","FI","BY","GR","NL","PT","NO","LV","LT","LU","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
areas[3] = ["CA"];
areas[4] = ["CA"];
areas[5] = ["CA"];
areas[6] = ["CA"];
function selectArea(code){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
areas.forEach(function(area) {
if(area.indexOf(code)>-1) {
mapObj.setSelectedRegions(area);
return;
}
});
}
function clearAll(){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
mapObj.clearSelectedRegions();
}
部分代码不起作用:为每个 "areas" 设置数组。并应用它 如果对应的数组在 "areas" 和 "areacolor".
之间
// Area Colors
var areacolor = [];
areacolor[0] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
areacolor[1] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
areacolor[2] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
function selectArea(color){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
areascolor.forEach(function(color) {
if(color.indexOf(color)>-1) {
map.series.regions[0].setValues(areacolor[0]);
return;
}
矢量图初始化:
$('#world-map').vectorMap({
map: 'world_mill',
backgroundColor: '#5288F9',
markersSelectable:'false',
regionsSelectableOne: 'false',
regionsSelectable: 'true',
regionStyle: {
initial: {
fill: "lightgrey"
},
selected: {
fill: "darkseagreen"
}
},
onRegionClick: function(e, code){
clearAll();
selectArea(code);
return false;
}
});
应用区域过滤器
(function () {
// Collect the rest of the World
var mapObj = $("#world-map").vectorMap("get", "mapObject");
var states = areas.join(",");
for(var code in mapObj.regions) {
if(mapObj.regions.hasOwnProperty(code)) {
if(states.indexOf(code) == -1) {
areas[0].push(code);
}
}
}
})();
});
更新:
//MAP CONTROLS
var areacolors0 = {
'BE': '#4E7387',
'FR': '#333333',
'BG': '#89AFBF',
'DK': '#817F8E',
'HR': '#344B5E',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
var areacolors1 = {
'BE': '#000000',
'FR': '#333333',
'BG': '#000000',
'DK': '#817F8E',
'HR': '#000000',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
$('#world-map').vectorMap({
map: 'world_mill',
backgroundColor: '#5288F9',
markersSelectable:'false',
regionsSelectableOne: 'false',
regionsSelectable: 'true',
regionStyle: {
initial: {
fill: "lightgrey"
},
selected: {
fill: "darkseagreen"
}
},
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
if(name == GR) {
map.series.regions[0].setValues(areacolors.GR);
}
if(name == CH) {
map.series.regions[0].setValues(areacolors1.CH);
}
},
});
由于数据结构的复杂性,您需要更深入地迭代。所以你有:
Array [
Array [
Object {
key: value
}
]
]
所以要找到匹配特定值的项,需要迭代初始数组,迭代每个元素中的数组项,并迭代矩阵中的每个对象。
我比较喜欢用jQuery$.each()
,和.forEach()
一样的思路。
var areacolor = [];
areacolor[0] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
]
areacolor[1] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
]
areacolor[2] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
];
function selectArea(color) {
//var mapObj = $("#world-map").vectorMap("get", "mapObject");
$.each(areacolor, function(k, ac) {
console.log("Examine areacolor[" + k + "]");
$.each(ac, function(i, area) {
$.each(area, function(c, clr) {
if (clr.indexOf(color) === 0) {
console.log("Color Found: " + c + ", " + clr);
//map.series.regions[0].setValues(areacolor[0]);
}
});
});
});
}
selectArea("#344B5E");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
控制台将显示:
Examine areacolor[0]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
Examine areacolor[1]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
Examine areacolor[2]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
如果您只是简单地为国家/地区代码指定一种颜色,那么制作一个简单的对象可能会更好:
var areacolors = {
'BE': '#4E7387',
'FR': '#333333',
'BG': '#89AFBF',
'DK': '#817F8E',
'HR': '#344B5E',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
然后,如果你知道国家代码,你可以简单地调用它的索引:
map.series.regions[0].setValues(areacolors.GR); // Dot Notation preferred
或者
map.series.regions[0].setValues(areacolor['GR']);
或者
var cc = "GR";
map.series.regions[0].setValues(areacolor[cc]);
我不熟悉你使用的这个插件,所以我不能说如何设置正确的值,我只是用你的例子来阐明我的观点。
希望这对您有所帮助。
更新 1
您更新后的代码看起来是正确的。我会检查控制台是否有任何警报或错误。
还要考虑这个:
var areacolors = {
'BE': '#000000',
'FR': '#333333',
'BG': '#000000',
'DK': '#817F8E',
'HR': '#000000',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
然后:
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
console.log("Name: " + name + ", Color: " + areacolors[name], map);
map.series.regions[0].setValues(areacolors[name]);
}
看起来你所有的颜色都是一样的,所以我看不出多数据集有什么好处。只需使用一个即可。此外,console.log()
函数对诊断问题非常有帮助。
我正在使用 Jvectormap 并将数组设置为 "areas" 以将国家分组在一起以供选择,这很有效。下一步是为数组中的每个国家指定颜色。所以我可以为每个数组中的每个国家/地区定义不同的颜色。
英国在数组 1 中可能是粉红色,但在数组 2 中可能是绿色。
还有我如何分配给点击功能:
$("#mp-cyprus-A").click(function(){
$('#world-map').vectorMap('setSelectedRegions', ['areas[1]']);
});
添加区域集然后为每个区域添加颜色集的代码:
//MAP CONTROLS
$(function(){
var areas = [];
areas[0] = [];
areas[2] = ["FR","BG","DK","HR","DE","BA","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
areas[2] = ["BE","FR","BG","DK","HR","DE","BA","HU","FI","BY","GR","NL","PT","NO","LV","LT","LU","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
areas[3] = ["CA"];
areas[4] = ["CA"];
areas[5] = ["CA"];
areas[6] = ["CA"];
function selectArea(code){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
areas.forEach(function(area) {
if(area.indexOf(code)>-1) {
mapObj.setSelectedRegions(area);
return;
}
});
}
function clearAll(){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
mapObj.clearSelectedRegions();
}
部分代码不起作用:为每个 "areas" 设置数组。并应用它 如果对应的数组在 "areas" 和 "areacolor".
之间 // Area Colors
var areacolor = [];
areacolor[0] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
areacolor[1] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
areacolor[2] = [
{'BE': '#4E7387'},
{'FR': '#333333'},
{'BG': '#89AFBF'},
{'DK': '#817F8E'},
{'HR': '#344B5E'},
{'FI': '#344B5E'},
{'BY': '#344B5E'},
{'GR': '#344B5E'}
]
function selectArea(color){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
areascolor.forEach(function(color) {
if(color.indexOf(color)>-1) {
map.series.regions[0].setValues(areacolor[0]);
return;
}
矢量图初始化:
$('#world-map').vectorMap({
map: 'world_mill',
backgroundColor: '#5288F9',
markersSelectable:'false',
regionsSelectableOne: 'false',
regionsSelectable: 'true',
regionStyle: {
initial: {
fill: "lightgrey"
},
selected: {
fill: "darkseagreen"
}
},
onRegionClick: function(e, code){
clearAll();
selectArea(code);
return false;
}
});
应用区域过滤器
(function () {
// Collect the rest of the World
var mapObj = $("#world-map").vectorMap("get", "mapObject");
var states = areas.join(",");
for(var code in mapObj.regions) {
if(mapObj.regions.hasOwnProperty(code)) {
if(states.indexOf(code) == -1) {
areas[0].push(code);
}
}
}
})();
});
更新:
//MAP CONTROLS
var areacolors0 = {
'BE': '#4E7387',
'FR': '#333333',
'BG': '#89AFBF',
'DK': '#817F8E',
'HR': '#344B5E',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
var areacolors1 = {
'BE': '#000000',
'FR': '#333333',
'BG': '#000000',
'DK': '#817F8E',
'HR': '#000000',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
$('#world-map').vectorMap({
map: 'world_mill',
backgroundColor: '#5288F9',
markersSelectable:'false',
regionsSelectableOne: 'false',
regionsSelectable: 'true',
regionStyle: {
initial: {
fill: "lightgrey"
},
selected: {
fill: "darkseagreen"
}
},
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
if(name == GR) {
map.series.regions[0].setValues(areacolors.GR);
}
if(name == CH) {
map.series.regions[0].setValues(areacolors1.CH);
}
},
});
由于数据结构的复杂性,您需要更深入地迭代。所以你有:
Array [
Array [
Object {
key: value
}
]
]
所以要找到匹配特定值的项,需要迭代初始数组,迭代每个元素中的数组项,并迭代矩阵中的每个对象。
我比较喜欢用jQuery$.each()
,和.forEach()
一样的思路。
var areacolor = [];
areacolor[0] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
]
areacolor[1] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
]
areacolor[2] = [{
'BE': '#4E7387'
},
{
'FR': '#333333'
},
{
'BG': '#89AFBF'
},
{
'DK': '#817F8E'
},
{
'HR': '#344B5E'
},
{
'FI': '#344B5E'
},
{
'BY': '#344B5E'
},
{
'GR': '#344B5E'
}
];
function selectArea(color) {
//var mapObj = $("#world-map").vectorMap("get", "mapObject");
$.each(areacolor, function(k, ac) {
console.log("Examine areacolor[" + k + "]");
$.each(ac, function(i, area) {
$.each(area, function(c, clr) {
if (clr.indexOf(color) === 0) {
console.log("Color Found: " + c + ", " + clr);
//map.series.regions[0].setValues(areacolor[0]);
}
});
});
});
}
selectArea("#344B5E");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
控制台将显示:
Examine areacolor[0]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
Examine areacolor[1]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
Examine areacolor[2]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
如果您只是简单地为国家/地区代码指定一种颜色,那么制作一个简单的对象可能会更好:
var areacolors = {
'BE': '#4E7387',
'FR': '#333333',
'BG': '#89AFBF',
'DK': '#817F8E',
'HR': '#344B5E',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
然后,如果你知道国家代码,你可以简单地调用它的索引:
map.series.regions[0].setValues(areacolors.GR); // Dot Notation preferred
或者
map.series.regions[0].setValues(areacolor['GR']);
或者
var cc = "GR";
map.series.regions[0].setValues(areacolor[cc]);
我不熟悉你使用的这个插件,所以我不能说如何设置正确的值,我只是用你的例子来阐明我的观点。
希望这对您有所帮助。
更新 1
您更新后的代码看起来是正确的。我会检查控制台是否有任何警报或错误。
还要考虑这个:
var areacolors = {
'BE': '#000000',
'FR': '#333333',
'BG': '#000000',
'DK': '#817F8E',
'HR': '#000000',
'FI': '#344B5E',
'BY': '#344B5E',
'GR': '#344B5E'
};
然后:
onRegionClick: function (event, code) {
var map = $('#world-map').vectorMap('get', 'mapObject');
var name = map.getRegionName(code);
console.log("Name: " + name + ", Color: " + areacolors[name], map);
map.series.regions[0].setValues(areacolors[name]);
}
看起来你所有的颜色都是一样的,所以我看不出多数据集有什么好处。只需使用一个即可。此外,console.log()
函数对诊断问题非常有帮助。