Estoy usando mapas de datos ( http://datamaps.github.io/ ) y trato de hacer un color para cada departamento que tenga un intervalo de acuerdo con la condición if en un mapa de Francia.
Por ejemplo, si intervalo == "1-50", haga un color rojo para todos los departamentos que están en este intervalo, y agregue esto a
data: { "mydepartment1": { fillKey: "red", }, "mydepartment2": { fillKey: "gt50", } }Este es mi 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_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", } } });Hola, no está claro qué debe hacer su código, el intervalo nunca parece usarse y solo se reinicia con cada iteración de uniqueValues
Busqué cómo usar mapas de datos, parece que la "clave" de relleno corresponde a la tecla de fillKey en el parámetro de data
entonces para
data: { "mydepartment1": { fillKey: "red", }, "mydepartment2": { fillKey: "gt50", } }Para trabajar necesitarías
fills: { defaultFill: "#EDE8D6", "red": "#F4F1E6", "gt50": "#EDE8D6", },Encontré esta publicación de blog que lo explica con más detalle. Espero que eso te ponga en el camino correcto.