Estoy mirando la documentación de react highmaps y parece que han codificado/guardado los datos del mapa.
Sin embargo, veo en muchos pequeños tutoriales que los datos provienen de los mapas altos simplemente pasando una clave como esta
mapData: Highcharts.maps['custom/world'],Ver ejemplo aquí
Pero dado que estoy escribiendo una aplicación pura de reactJS/nodeJS, me preguntaba si hay una forma en pura reacción de extraer los datos de la ruta para los mapas mundiales. ¿Está esto implementado para reaccionar en mapas altos en alguna parte?
De acuerdo con la documentación oficial de Highcharts , debe incluir manualmente el script del mapa:
En resumen, la versión GeoJSON del mapa se carga en una etiqueta de secuencia de comandos en la página. Este objeto GeoJSON luego se registra en el objeto Highcharts.maps y se aplica a la opción mapData en la configuración del gráfico.
Como puede ver en el violín que mencionó, incluyeron el mapa con la etiqueta del script:
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script> Debido a la inclusión del script anterior, el mapa está disponible en Highcharts.maps['custom/world'] .
Entonces, en el módulo React, debe agregar manualmente los mapas deseados, como en la demostración que mencionó. Por ejemplo, si desea agregar el mapa mundial, entonces:
Highcharts.maps["custom/world"] = con module.exports = en el archivo anterior.const map = require('./maps/world');mapData: mapEntiendo que desea omitir el proceso anterior, pero actualmente no hay ningún módulo de React que incluya el mapa.
En realidad, hay una forma de hacerlo. En su archivo html, donde se incluyen los scripts de reacción, puede incluir la etiqueta de script world.js, pero primero debe asegurarse de que exista la matriz de objetos Highcharts.maps. De esa manera, usará los mapas externamente.
Sin embargo, esta es una mala práctica , debido a que los componentes de React dependerán de ese script de mapa.
Una buena práctica es administrar los módulos de su proveedor a través del administrador de paquetes y hacer referencia a los módulos en los componentes. De esa manera los componentes son autodescriptivos.
Los mapas ya están disponibles en npm. Puede importarlos directamente a su componente y pasarlo a Highcharts a través del objeto de opciones.
npm i @highcharts/map-collection
import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json'
series: [ { mapData: mapDataWorld, name: "Asia", data: data } ]Encuentro otras formas de renderizar el mapa.
series: [{ data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']), name: 'USA', dataLabels: { enabled: true, format: '{point.properties.postal-code}' } }]Del ejemplo del foro de highcharts
Básicamente, llame a la URL de origen js para crear el mapa, pero prefiero usar la forma de Jordan Enev.
Después de echar un vistazo, highcharts ya proporcionó la colección de mapas, puede instalar el ejemplo de dependencia @highcharts/map-collection
Después de eso puedes probar
import React, { Component } from 'react'; import Highcharts from 'highcharts/highmaps'; import exporting from 'highcharts/modules/exporting'; ... ... exporting(Highcharts); window.Highcharts = Highcharts; require('@highcharts/map-collection/countries/id/id-all'); ... ... class Choroplethmap extends Component { ... ... ... } export default Choroplethmap;Este problema ya se planteó en este tema
Salud,