1

我正在使用数据地图（http://datamaps.github.io/）并尝试根据法国地图中的 if 条件为每个具有间隔的部门制作颜色。

例如，如果区间 == "1-50" 为该区间内的所有部门设置红色，并将其添加到

data: {
    "mydepartment1": {
      fillKey: "red",
    },
    "mydepartment2": {
      fillKey: "gt50",
    }
  }

这是我的 js： 从“../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_votes = [];
for (const valeur of uniqueValues) {
  nb_votes = dataValues.filter((v) => v == valeur).length;
  if (nb_votes <= 0) {
    interval = "defaultFill";
  } else if (nb_votes > 1 && nb_votes < 50) {
    interval = "1-50";
  } else if (nb_votes > 51 && nb_votes < 100) {
    interval = "51-100";
  } else if (nb_votes > 101 && nb_votes < 150) {
    interval = "101-150";
  } else if (nb_votes > 151 && nb_votes < 200) {
    interval = "151-200";
  } else if (nb_votes > 201 && nb_votes < 300) {
    interval = "201-300";
  } else if (nb_votes > 301 && nb_votes < 400) {
    interval = "301-400";
  } else {
    interval = "401-";
  }
}

var map = new Datamap({
  scope: "fra",
  element: document.getElementById("map-france"),
  responsive: true,
  fills: {
    defaultFill: "#EDE8D6",
    "1-50": "#F4F1E6",
    "51-100": "#EDE8D6",
    "101-150": "#E2DABF",
    "151-200": "#CEC191",
    "201-300": "#BCAE7C",
    "301-400": "#9D893E",
    "401-": "#827131",
  },
  data: {
    "mydepartment1": {
      fillKey: "101-150",
    },
    "mydepartment2": {
      fillKey: "151-200",
    }
  }
});
4

1 回答 1

0

嗨，目前尚不清楚您的代码是做什么的，区间似乎从未被使用过，只是在每次迭代时重置uniqueValues

我已经查找了如何使用数据映射，看起来填充“键”对应fillKey于data参数中的

因此对于

data: {
    "mydepartment1": {
      fillKey: "red",
    },
    "mydepartment2": {
      fillKey: "gt50",
    }
  }

为了工作，你需要

fills: {
    defaultFill: "#EDE8D6",
    "red": "#F4F1E6",
    "gt50": "#EDE8D6",
  },

我发现这篇博客文章更详细地介绍了它。希望这能让你走上正确的道路

于 2021-10-01T21:55:34.387 回答