Блог

Я использую карты данных (http://datamaps.github.io/) и пытается сделать цвет для каждого отдела, у которого есть интервал в соответствии с условием if на карте Франции.

Например, если интервал == «1-50», выделите красным цветом все отделы, находящиеся в этом интервале, и добавьте это в

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

Это мой js :
импорт списка отделов из «../данные/отделы-список.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 amp;amp; nb_votes < 50) {
    interval = "1-50";
  } else if (nb_votes > 51 amp;amp; nb_votes < 100) {
    interval = "51-100";
  } else if (nb_votes > 101 amp;amp; nb_votes < 150) {
    interval = "101-150";
  } else if (nb_votes > 151 amp;amp; nb_votes < 200) {
    interval = "151-200";
  } else if (nb_votes > 201 amp;amp; nb_votes < 300) {
    interval = "201-300";
  } else if (nb_votes > 301 amp;amp; 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",
    }
  }
});
 

Привет, не ясно, для чего предназначен ваш код, интервал, похоже, никогда не используется и просто сбрасывается с каждой итерацией uniqueValues

Я посмотрел, как использовать карты данных, похоже, что «ключ» заполнения соответствует fillKey data параметру

так что для

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

Для работы вам понадобится

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

Я нашел это сообщение в блоге, в котором рассказывается об этом более подробно. Надеюсь, это выведет вас на правильный путь