Данные о картах мира в реакциях высоких чартов

Я смотрю документацию по реагированию highmaps и кажется, что они имеют жестко закодированные/сохраненные данные карты:

https://github.com/kirjs/react-highcharts https://github.com/kirjs/react-highcharts/tree/master/demo/src/mapdata

Я вижу во многих маленьких учебниках, хотя данные поступают из самых высоких карт, просто передавая такой ключ

mapData: Highcharts.maps['custom/world'],

См. пример здесь: http://jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/maps/tooltip/usehtml/

Но, учитывая, что я пишу приложение pureJS/nodeJS, мне было интересно, есть ли способ в чистом реагировании, чтобы вытащить данные о пути для карт мира? Разве это развертывается, чтобы где-то реагировать на карты?

ОТВЕТЫ

Ответ 1

В соответствии с официальной документацией официальная документация Highcharts вы должны включить в свой список карту script:

Короче говоря, версия карты GeoJSON загружается в тег script в страница. Этот объект GeoJSON затем регистрируется на Highcharts.maps и применяется к параметру mapData в диаграмме установка.

Как вы можете видеть в скрипте, которую вы упомянули, они включали карту с тегом script:

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

В связи с приведенным выше script, карта доступна в Highcharts.maps['custom/world'].

Итак, в модуле React вы должны вручную добавить нужные карты, например, в демо, о которой вы упомянули. Например, если вы хотите добавить карту мира, то:

  • Получите это отсюда: https://code.highcharts.com/mapdata/custom/world.js
  • Замените Highcharts.maps["custom/world"] = на module.exports = в вышеуказанном файле.
  • Загрузите карту в свой компонент const map = require('./maps/world');
  • Затем вы можете ссылаться на него в config mapData: map

Я понимаю, что вы хотите пропустить вышеупомянутый процесс, но в настоящее время нет никакого модуля React, который включает в себя карту.

На самом деле есть хакерский способ, которым вы можете это сделать... В вашем html файле, где включены сценарии реагирования, вы можете включить тэг world.js script, но сначала вам нужно убедиться, что Highcharts. существует массив объектов. Таким образом вы будете использовать карты извне.

Однако это плохая практика, поскольку ваши компоненты React будут зависеть от этой карты script.

Хорошая практика - управлять модулями вашего поставщика через диспетчер пакетов и ссылаться на модули в компонентах. Таким образом, компоненты являются самоописательными

Ответ 2

Я нахожу другие способы визуализации карты.

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}'
          }
}]

Из примера форума Highcharts

Обычно для создания карты вызывается исходный URL-адрес js, но я предпочитаю использовать путь Джордана Энева.

В конце я взгляну, Highcharts уже дал коллекцию карт, можно установить зависимость @/Highcharts карты-коллекцию пример

После этого вы можете попробовать

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;

Этот вопрос уже поднимать по этому вопросу

Ура,

Ответ 3

Карты теперь доступны с npm. Вы можете импортировать их непосредственно в ваш компонент и передать его в Highcharts через объект параметров.

npm я @highcharts/map-collection

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json'

series: [
  {
    mapData: mapDataWorld,
    name: "Asia",
    data: data
  }
]