我很確定我離我的腳本作業只有一行,但我不知道出了什么問題。我正在處理本地 html 頁面,我正在嘗試使用svgMap庫來創建我看過的所有電影的地圖。資料來自我制作的谷歌表格,我通過opensheet庫檢索。到目前為止一切順利,我得到了這個 JSON:
[{"Pays":"USA","Nb_films":"1005"},{"Pays":"France","Nb_films":"278"},{"Pays":"UK","Nb_films":"220"},{"Pays":"Canada","Nb_films":"71"},{"Pays":"Allemagne","Nb_films":"68"},{"Pays":"Belgique","Nb_films":"35"},{"Pays":"Japon","Nb_films":"33"},{"Pays":"Australie","Nb_films":"31"},{"Pays":"Italie","Nb_films":"30"},{"Pays":"Espagne","Nb_films":"23"},{"Pays":"Chine","Nb_films":"18"},{"Pays":"Inde","Nb_films":"16"},{"Pays":"Nouvelle-Zélande","Nb_films":"13"},{"Pays":"Suède","Nb_films":"11"},{"Pays":"Danemark","Nb_films":"10"},{"Pays":"Irlande","Nb_films":"10"},{"Pays":"Mexique","Nb_films":"8"},{"Pays":"Afrique du Sud","Nb_films":"7"},{"Pays":"Pays-Bas","Nb_films":"7"},{"Pays":"Corée du Sud","Nb_films":"6"},{"Pays":"Suisse","Nb_films":"6"},{"Pays":"Tchéquie","Nb_films":"6"},{"Pays":"Norvège","Nb_films":"4"},{"Pays":"Autriche","Nb_films":"3"},{"Pays":"Chili","Nb_films":"3"},{"Pays":"Grèce","Nb_films":"3"},{"Pays":"Hongrie","Nb_films":"3"},{"Pays":"Luxembourg","Nb_films":"3"},{"Pays":"Russie","Nb_films":"3"},{"Pays":"Union soviétique","Nb_films":"3"},{"Pays":"Hong Kong","Nb_films":"2"},{"Pays":"Pologne","Nb_films":"2"},{"Pays":"Portugal","Nb_films":"2"},{"Pays":"Sénégal","Nb_films":"2"},{"Pays":"Tha?lande","Nb_films":"2"},{"Pays":"émirats Arabes Unis","Nb_films":"2"},{"Pays":"Argentine","Nb_films":"1"},{"Pays":"Arménie","Nb_films":"1"},{"Pays":"Brésil","Nb_films":"1"},{"Pays":"Indonésie","Nb_films":"1"},{"Pays":"Iran","Nb_films":"1"},{"Pays":"Islande","Nb_films":"1"},{"Pays":"Isra?l","Nb_films":"1"},{"Pays":"Kenya","Nb_films":"1"},{"Pays":"Lettonie","Nb_films":"1"},{"Pays":"Martinique","Nb_films":"1"},{"Pays":"Philippines","Nb_films":"1"},{"Pays":"Roumanie","Nb_films":"1"},{"Pays":"Singapour","Nb_films":"1"}]
現在我必須將兩者聯系在一起,但這就是我完全卡住的地方!到目前為止,這是我的代碼:
<!DOCTYPE HTML>
<html>
<head>
<title>Films map</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
</head>
<body>
<div id="cartedesfilms"></div>
<script>
var countryCodes = {
AF: 'Afghanistan',
AX: '?les ?land',
AL: 'Albanie',
DZ: 'Algérie',
AS: 'Samoa américaines',
AD: 'Andorre',
AO: 'Angola',
AI: 'Anguilla',
AQ: 'Antarctique',
AG: 'Antigua-et-Barbuda',
AR: 'Argentine',
AM: 'Arménie',
AW: 'Aruba',
AU: 'Australie',
AT: 'Autriche',
AZ: 'Azerba?djan',
BS: 'Bahamas',
BH: 'Bahre?n',
BD: 'Bangladesh',
BB: 'Barbade',
BY: 'Biélorussie',
BE: 'Belgique',
BZ: 'Belize',
BJ: 'Bénin',
BM: 'Bermudes',
BT: 'Bhoutan',
BO: 'Bolivie',
BA: 'Bosnie-Herzégovine',
BW: 'Botswana',
BR: 'Brésil',
IO: 'Territoire britannique de l’océan Indien',
VG: '?les Vierges britanniques',
BN: 'Brunéi Darussalam',
BG: 'Bulgarie',
BF: 'Burkina Faso',
BI: 'Burundi',
KH: 'Cambodge',
CM: 'Cameroun',
CA: 'Canada',
CV: 'Cap-Vert',
BQ: 'Pays-Bas caribéens',
KY: '?les Ca?mans',
CF: 'République centrafricaine',
TD: 'Tchad',
CL: 'Chili',
CN: 'Chine',
CX: '?le Christmas',
CC: '?les Cocos',
CO: 'Colombie',
KM: 'Comores',
CG: 'Congo-Brazzaville',
CK: '?les Cook',
CR: 'Costa Rica',
HR: 'Croatie',
CU: 'Cuba',
CW: 'Cura?ao',
CY: 'Chypre',
CZ: 'Tchéquie',
CD: 'Congo-Kinshasa',
DK: 'Danemark',
DJ: 'Djibouti',
DM: 'Dominique',
DO: 'République dominicaine',
EC: 'équateur',
EG: 'égypte',
SV: 'El Salvador',
GQ: 'Guinée équatoriale',
ER: 'érythrée',
EE: 'Estonie',
ET: 'éthiopie',
FK: '?les Malouines',
FO: '?les Féroé',
FM: 'états fédérés de Micronésie',
FJ: 'Fidji',
FI: 'Finlande',
FR: 'France',
GF: 'Guyane fran?aise',
PF: 'Polynésie fran?aise',
TF: 'Terres australes fran?aises',
GA: 'Gabon',
GM: 'Gambie',
GE: 'Géorgie',
DE: 'Allemagne',
GH: 'Ghana',
GI: 'Gibraltar',
GR: 'Grèce',
GL: 'Groenland',
GD: 'Grenade',
GP: 'Guadeloupe',
GU: 'Guam',
GT: 'Guatemala',
GN: 'Guinée',
GW: 'Guinée-Bissau',
GY: 'Guyana',
HT: 'Ha?ti',
HN: 'Honduras',
HK: 'Hong Kong',
HU: 'Hongrie',
IS: 'Islande',
IN: 'Inde',
ID: 'Indonésie',
IR: 'Iran',
IQ: 'Irak',
IE: 'Irlande',
IM: '?le de Man',
IL: 'Isra?l',
IT: 'Italie',
CI: 'C?te d’Ivoire',
JM: 'Jama?que',
JP: 'Japon',
JE: 'Jersey',
JO: 'Jordanie',
KZ: 'Kazakhstan',
KE: 'Kenya',
KI: 'Kiribati',
XK: 'Kosovo',
KW: 'Kowe?t',
KG: 'Kirghizistan',
LA: 'Laos',
LV: 'Lettonie',
LB: 'Liban',
LS: 'Lesotho',
LR: 'Libéria',
LY: 'Libye',
LI: 'Liechtenstein',
LT: 'Lituanie',
LU: 'Luxembourg',
MO: 'R.A.S. chinoise de Macao',
MK: 'Macédoine',
MG: 'Madagascar',
MW: 'Malawi',
MY: 'Malaisie',
MV: 'Maldives',
ML: 'Mali',
MT: 'Malte',
MH: '?les Marshall',
MQ: 'Martinique',
MR: 'Mauritanie',
MU: 'Maurice',
YT: 'Mayotte',
MX: 'Mexique',
MD: 'Moldavie',
MC: 'Monaco',
MN: 'Mongolie',
ME: 'Monténégro',
MS: 'Montserrat',
MA: 'Maroc',
MZ: 'Mozambique',
MM: 'Myanmar (Birmanie)',
NA: 'Namibie',
NR: 'Nauru',
NP: 'Népal',
NL: 'Pays-Bas',
NC: 'Nouvelle-Calédonie',
NZ: 'Nouvelle-Zélande',
NI: 'Nicaragua',
NE: 'Niger',
NG: 'Nigéria',
NU: 'Niue',
NF: '?le Norfolk',
KP: 'Corée du Nord',
MP: '?les Mariannes du Nord',
NO: 'Norvège',
OM: 'Oman',
PK: 'Pakistan',
PW: 'Palaos',
PS: 'Territoires palestiniens',
PA: 'Panama',
PG: 'Papouasie-Nouvelle-Guinée',
PY: 'Paraguay',
PE: 'Pérou',
PH: 'Philippines',
PN: '?les Pitcairn',
PL: 'Pologne',
PT: 'Portugal',
PR: 'Porto Rico',
QA: 'Qatar',
RE: 'La Réunion',
RO: 'Roumanie',
RU: 'Russie',
RW: 'Rwanda',
SH: 'Sainte-Hélène',
KN: 'Saint-Christophe-et-Niévès',
LC: 'Sainte-Lucie',
PM: 'Saint-Pierre-et-Miquelon',
VC: 'Saint-Vincent-et-les-Grenadines',
WS: 'Samoa',
SM: 'Saint-Marin',
ST: 'Sao Tomé-et-Principe',
SA: 'Arabie saoudite',
SN: 'Sénégal',
RS: 'Serbie',
SC: 'Seychelles',
SL: 'Sierra Leone',
SG: 'Singapour',
SX: 'Saint-Martin (partie néerlandaise)',
SK: 'Slovaquie',
SI: 'Slovénie',
SB: '?les Salomon',
SO: 'Somalie',
ZA: 'Afrique du Sud',
GS: 'Géorgie du Sud et ?les Sandwich du Sud',
KR: 'Corée du Sud',
SS: 'Soudan du Sud',
ES: 'Espagne',
LK: 'Sri Lanka',
SD: 'Soudan',
SR: 'Suriname',
SJ: 'Svalbard et Jan Mayen',
SZ: 'Swaziland',
SE: 'Suède',
CH: 'Suisse',
SY: 'Syrie',
TW: 'Ta?wan',
TJ: 'Tadjikistan',
TZ: 'Tanzanie',
TH: 'Tha?lande',
TL: 'Timor oriental',
TG: 'Togo',
TK: 'Tokélaou',
TO: 'Tonga',
TT: 'Trinité-et-Tobago',
TN: 'Tunisie',
TR: 'Turquie',
TM: 'Turkménistan',
TC: '?les Turques-et-Ca?ques',
TV: 'Tuvalu',
UG: 'Ouganda',
UA: 'Ukraine',
AE: 'émirats Arabes Unis',
GB: 'UK',
US: 'USA',
UM: '?les mineures éloignées des états-Unis',
VI: '?les Vierges des états-Unis',
UY: 'Uruguay',
UZ: 'Ouzbékistan',
VU: 'Vanuatu',
VA: 'Vatican',
VE: 'Venezuela',
VN: 'Vietnam',
WF: 'Wallis-et-Futuna',
EH: 'Sahara occidental',
YE: 'Yémen',
ZM: 'Zambie',
ZW: 'Zimbabwe'
}
var inverseCountryCodes = {};
for(i in countryCodes){
inverseCountryCodes[countryCodes[i]] = i;
};
function fairelaliste(){
var listedespays = [];
fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
data.forEach((row) => {
var codepays = "";
var filmspays = 0;
var donneespays= {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
donneespays = {[codepays]: {nbfilms: filmspays}};
listedespays.push(donneespays);
});
return listedespays;
});
};
new svgMap({
targetElementID: 'cartedesfilms',
initialZoom:'1',
maxZoom:'25',
mouseWheelZoomEnabled:'true',
colorMax: '#a64d79',
colorMin: '#f9cb9c',
colorNoData: '#efefef',
flagType:'emoji',
noDataText:'pas de films',
countryNames: countryCodes,
data: {
data: {
nbfilms: {
name: 'nombre de films vus',
format: '{0}',
thousandSeparator: ' ',
thresholdMax: 100,
thresholdMin: 1
}
},
applyData: 'nbfilms',
values: fairelaliste()
}
});
</script>
</body>
</html>
如您所見,首先代碼使用 countryCodes 物件將 ISO 代碼與國家/地區名稱相關聯,反之亦然,然后我構建了一個函式來獲取 json 并將正確的格式注入到 svgMap JSON 中的“values”屬性中。但我無法讓 faireliste() 函式正常作業。
svgMap 的“值”屬性的正確格式應該是:
values{
US:{
nbfilms: 1005
},
FR:{
nbfilms: 278
}
//etc
}
所以我的函式應該從國家名稱(codepays 變數)中獲取 iso 代碼,然后是電影的數量(filmspays 變數),并將這兩者注入一個新陣列,然后對于該陣列中的每個元素,我使用 ISO 代碼選擇與所需國家相對應的 JSON 引數,然后我將 nbfilms 編號注入它應該在的位置......但我不確定我是否可以這樣做,lmao?地圖變黑了,所以發生了一些事情,但控制臺告訴我讀取 ISO 代碼變數時出現錯誤?
前任:
未捕獲的型別錯誤:無法在 l.getTooltipContent (svgMap.min.js:2:12743) 處讀取未定義的屬性(讀取“US”)。(svgMap.min.js:2:10746)當我將滑鼠懸停在地圖上時,每個國家/地區都會重復相同的錯誤。
感謝您的幫助:(
編輯:我編輯了 fairelaliste 函式,因為我意識到我發布了錯誤的版本,對不起!
uj5u.com熱心網友回復:
所有國家都需要直接添加到您的值物件中。
您的 values var 實際上是一個物件陣列。您應該像這樣添加所有國家/地區專案。
var codepays = "";
var filmspays = 0;
var donneespays= {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
if(codepays){
listedespays[codepays]={nbfilms: filmspays};
}
此外,您正在立即初始化新地圖,而listedespays資料尚未檢索(通過 fetch() 請求)。
只需new svgMap({...})在您的fairelaliste()通話中包含您的地圖初始化。
作業示例
顯示代碼片段
var countryCodes = {
AF: 'Afghanistan',
AX: '?les ?land',
AL: 'Albanie',
DZ: 'Algérie',
AS: 'Samoa américaines',
AD: 'Andorre',
AO: 'Angola',
AI: 'Anguilla',
AQ: 'Antarctique',
AG: 'Antigua-et-Barbuda',
AR: 'Argentine',
AM: 'Arménie',
AW: 'Aruba',
AU: 'Australie',
AT: 'Autriche',
AZ: 'Azerba?djan',
BS: 'Bahamas',
BH: 'Bahre?n',
BD: 'Bangladesh',
BB: 'Barbade',
BY: 'Biélorussie',
BE: 'Belgique',
BZ: 'Belize',
BJ: 'Bénin',
BM: 'Bermudes',
BT: 'Bhoutan',
BO: 'Bolivie',
BA: 'Bosnie-Herzégovine',
BW: 'Botswana',
BR: 'Brésil',
IO: 'Territoire britannique de l’océan Indien',
VG: '?les Vierges britanniques',
BN: 'Brunéi Darussalam',
BG: 'Bulgarie',
BF: 'Burkina Faso',
BI: 'Burundi',
KH: 'Cambodge',
CM: 'Cameroun',
CA: 'Canada',
CV: 'Cap-Vert',
BQ: 'Pays-Bas caribéens',
KY: '?les Ca?mans',
CF: 'République centrafricaine',
TD: 'Tchad',
CL: 'Chili',
CN: 'Chine',
CX: '?le Christmas',
CC: '?les Cocos',
CO: 'Colombie',
KM: 'Comores',
CG: 'Congo-Brazzaville',
CK: '?les Cook',
CR: 'Costa Rica',
HR: 'Croatie',
CU: 'Cuba',
CW: 'Cura?ao',
CY: 'Chypre',
CZ: 'Tchéquie',
CD: 'Congo-Kinshasa',
DK: 'Danemark',
DJ: 'Djibouti',
DM: 'Dominique',
DO: 'République dominicaine',
EC: 'équateur',
EG: 'égypte',
SV: 'El Salvador',
GQ: 'Guinée équatoriale',
ER: 'érythrée',
EE: 'Estonie',
ET: 'éthiopie',
FK: '?les Malouines',
FO: '?les Féroé',
FM: 'états fédérés de Micronésie',
FJ: 'Fidji',
FI: 'Finlande',
FR: 'France',
GF: 'Guyane fran?aise',
PF: 'Polynésie fran?aise',
TF: 'Terres australes fran?aises',
GA: 'Gabon',
GM: 'Gambie',
GE: 'Géorgie',
DE: 'Allemagne',
GH: 'Ghana',
GI: 'Gibraltar',
GR: 'Grèce',
GL: 'Groenland',
GD: 'Grenade',
GP: 'Guadeloupe',
GU: 'Guam',
GT: 'Guatemala',
GN: 'Guinée',
GW: 'Guinée-Bissau',
GY: 'Guyana',
HT: 'Ha?ti',
HN: 'Honduras',
HK: 'Hong Kong',
HU: 'Hongrie',
IS: 'Islande',
IN: 'Inde',
ID: 'Indonésie',
IR: 'Iran',
IQ: 'Irak',
IE: 'Irlande',
IM: '?le de Man',
IL: 'Isra?l',
IT: 'Italie',
CI: 'C?te d’Ivoire',
JM: 'Jama?que',
JP: 'Japon',
JE: 'Jersey',
JO: 'Jordanie',
KZ: 'Kazakhstan',
KE: 'Kenya',
KI: 'Kiribati',
XK: 'Kosovo',
KW: 'Kowe?t',
KG: 'Kirghizistan',
LA: 'Laos',
LV: 'Lettonie',
LB: 'Liban',
LS: 'Lesotho',
LR: 'Libéria',
LY: 'Libye',
LI: 'Liechtenstein',
LT: 'Lituanie',
LU: 'Luxembourg',
MO: 'R.A.S. chinoise de Macao',
MK: 'Macédoine',
MG: 'Madagascar',
MW: 'Malawi',
MY: 'Malaisie',
MV: 'Maldives',
ML: 'Mali',
MT: 'Malte',
MH: '?les Marshall',
MQ: 'Martinique',
MR: 'Mauritanie',
MU: 'Maurice',
YT: 'Mayotte',
MX: 'Mexique',
MD: 'Moldavie',
MC: 'Monaco',
MN: 'Mongolie',
ME: 'Monténégro',
MS: 'Montserrat',
MA: 'Maroc',
MZ: 'Mozambique',
MM: 'Myanmar (Birmanie)',
NA: 'Namibie',
NR: 'Nauru',
NP: 'Népal',
NL: 'Pays-Bas',
NC: 'Nouvelle-Calédonie',
NZ: 'Nouvelle-Zélande',
NI: 'Nicaragua',
NE: 'Niger',
NG: 'Nigéria',
NU: 'Niue',
NF: '?le Norfolk',
KP: 'Corée du Nord',
MP: '?les Mariannes du Nord',
NO: 'Norvège',
OM: 'Oman',
PK: 'Pakistan',
PW: 'Palaos',
PS: 'Territoires palestiniens',
PA: 'Panama',
PG: 'Papouasie-Nouvelle-Guinée',
PY: 'Paraguay',
PE: 'Pérou',
PH: 'Philippines',
PN: '?les Pitcairn',
PL: 'Pologne',
PT: 'Portugal',
PR: 'Porto Rico',
QA: 'Qatar',
RE: 'La Réunion',
RO: 'Roumanie',
RU: 'Russie',
RW: 'Rwanda',
SH: 'Sainte-Hélène',
KN: 'Saint-Christophe-et-Niévès',
LC: 'Sainte-Lucie',
PM: 'Saint-Pierre-et-Miquelon',
VC: 'Saint-Vincent-et-les-Grenadines',
WS: 'Samoa',
SM: 'Saint-Marin',
ST: 'Sao Tomé-et-Principe',
SA: 'Arabie saoudite',
SN: 'Sénégal',
RS: 'Serbie',
SC: 'Seychelles',
SL: 'Sierra Leone',
SG: 'Singapour',
SX: 'Saint-Martin (partie néerlandaise)',
SK: 'Slovaquie',
SI: 'Slovénie',
SB: '?les Salomon',
SO: 'Somalie',
ZA: 'Afrique du Sud',
GS: 'Géorgie du Sud et ?les Sandwich du Sud',
KR: 'Corée du Sud',
SS: 'Soudan du Sud',
ES: 'Espagne',
LK: 'Sri Lanka',
SD: 'Soudan',
SR: 'Suriname',
SJ: 'Svalbard et Jan Mayen',
SZ: 'Swaziland',
SE: 'Suède',
CH: 'Suisse',
SY: 'Syrie',
TW: 'Ta?wan',
TJ: 'Tadjikistan',
TZ: 'Tanzanie',
TH: 'Tha?lande',
TL: 'Timor oriental',
TG: 'Togo',
TK: 'Tokélaou',
TO: 'Tonga',
TT: 'Trinité-et-Tobago',
TN: 'Tunisie',
TR: 'Turquie',
TM: 'Turkménistan',
TC: '?les Turques-et-Ca?ques',
TV: 'Tuvalu',
UG: 'Ouganda',
UA: 'Ukraine',
AE: 'émirats Arabes Unis',
GB: 'UK',
US: 'USA',
UM: '?les mineures éloignées des états-Unis',
VI: '?les Vierges des états-Unis',
UY: 'Uruguay',
UZ: 'Ouzbékistan',
VU: 'Vanuatu',
VA: 'Vatican',
VE: 'Venezuela',
VN: 'Vietnam',
WF: 'Wallis-et-Futuna',
EH: 'Sahara occidental',
YE: 'Yémen',
ZM: 'Zambie',
ZW: 'Zimbabwe'
}
var inverseCountryCodes = {};
for (i in countryCodes) {
inverseCountryCodes[countryCodes[i]] = i;
};
fairelaliste();
function fairelaliste() {
//var listedespays = [];
var listedespays = {};
fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
data.forEach((row) => {
var codepays = "";
var filmspays = 0;
var donneespays = {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
if (codepays) {
listedespays[codepays] = {
nbfilms: filmspays
};
}
});
// listedespays is complete – now you can initialize the map
new svgMap({
targetElementID: 'cartedesfilms',
initialZoom: '1',
maxZoom: '25',
mouseWheelZoomEnabled: 'true',
colorMax: '#a64d79',
colorMin: '#f9cb9c',
colorNoData: '#efefef',
flagType: 'emoji',
noDataText: 'pas de films',
countryNames: countryCodes,
data: {
data: {
nbfilms: {
name: 'nombre de films vus',
format: '{0}',
thousandSeparator: ' ',
thresholdMax: 100,
thresholdMin: 1
}
},
applyData: 'nbfilms',
values: listedespays
}
});
});
};
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
<div id="cartedesfilms"></div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/429795.html
標籤:javascript jQuery json 谷歌表格
下一篇:JOLT轉換資料創建嵌套對
