我试图在 for 循环之外获得票数(nb_votes)并使用 Datamaps 插件将其绑定到特定部门(geo.properties.name)。
这是我的html:
<div id="map-france" class="col-md-7"></div>
这是我的 js:
import departement_list from "../data/departements-list.json";
var jsonData = JSON.parse(JSON.stringify(departement_list));
const dataValues = jsonData.map((data) => data.Departement);
const uniqueValues = [...new Set(dataValues)];
let interval,
nb = [],
dep = [];
for (let i = 0; i < uniqueValues.length; i++) {
nb_votes.push(dataValues.filter((v) => v == uniqueValues[i]).length);
if (nb_votes <= 0) {
interval = "defaultFill";
dep.push(dataValues[i]);
} else if (nb_votes > 1 && nb_votes < 50) {
interval = "1-50";
dep.push(dataValues[i]);
} else if (nb_votes > 51 && nb_votes < 100) {
interval = "51-100";
dep.push(dataValues[i]);
} else if (nb_votes > 101 && nb_votes < 150) {
interval = "101-150";
dep.push(dataValues[i]);
} else if (nb_votes > 151 && nb_votes < 200) {
interval = "151-200";
dep.push(dataValues[i]);
} else if (nb_votes > 201 && nb_votes < 300) {
interval = "201-300";
dep.push(dataValues[i]);
} else if (nb_votes > 301 && nb_votes < 400) {
interval = "301-400";
dep.push(dataValues[i]);
} else {
interval = "401-";
dep.push(dataValues[i]);
}
// console.log(" dep : ", dataValues[i], " nb vote :", nb_votes, " INTERVAL : ", interval);
}
console.log(" dep : ", dep, " nb vote :", nb_votes, " INTERVAL : ", interval);
var map = new Datamap({
scope: "fra",
element: document.getElementById("map-france"),
responsive: true,
geographyConfig: {
popupTemplate: function (geo, data) {
return [
'<div class="hoverinfo"><strong>',
geo.properties.name,
" ",
nb_votes,
"parrainages",
"</strong></div>",
].join("");
}
}
});
import departement_list from "../data/departements-list.json";
是法国地图中所有部门的列表,这是一个非常大的文件,它看起来像:
[ {
"Departement": "Lozère"
}, {
"Departement": "Indre-et-Loire"
}, {
"Departement": "Loire"
}, {
"Departement": "Lozère"
}, {
"Departement": "Nord"
}, . …………
popupTemplate
是我尝试做所有事情的功能(我写了评论)。
使用此代码,我有一个结果:部门名称+所有选票,例如:Lozère 1、15、12、54、54 票
PS:我删除了大部分代码,所以我可以验证我的问题,我保留了重要信息。