0

我试图在 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:我删除了大部分代码,所以我可以验证我的问题,我保留了重要信息。

这就是我使用这段代码得到的: 在此处输入图像描述

4

0 回答 0