HighMaps выбирают карту из списка - проблемы Highcharts.geojson и Highcharts.mapDataIndex

Question

Я хочу создать карту, где я могу предоставить выпадающий список всех доступных mapDatas, например: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/all-maps

У меня есть все карты в моей локальной системе в @ highcharts / map-collection (https://www.highcharts.com/docs/maps/map-collection), и я хочу использовать их вместо загрузки из https://code.highcharts.com/mapdata во время выполнения.

В моем файле для машинописного текста я использую следующий импорт

import * as Highcharts from "highcharts/highmaps";
import * as HC_DATA from "highcharts/modules/data";
HC_DATA(Highcharts);

В серии Iпредоставить mapData как:

series: [{
            mapData: Highcharts.geojson(Highcharts.maps['custom/world']),
            name: 'My series',
            data: data,
        }]   

Я получаю следующее исключение во время выполнения:

ng: ///CreationModule/DashboardComponent.ngfactory.js: 564 ОШИБКА TypeError: Невозможно прочитать свойство«Возможности» неопределенных в Object.a.geojson

Вторая проблема: я хочу получить список всех доступных карт, я пытаюсь получить доступ к Highcharts.mapDataIndex, как это объяснено в demo / all-maps , я получаю сообщение об ошибке, что mapDataIndex не определено.

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

Answer 1

Первая проблема связана с неправильным импортом картографических данных.Просто Highcharts.maps['custom/world'] не определено.Вы можете импортировать данные карты как json и передать их в chart.map свойство следующим образом:

const worldMap = require('@highcharts/map-collection/custom/world.geo.json');

chartOptions = {
    chart: {
      map: worldMap
    },
    ...
}

---

Вторая проблема: я хочу получить список всех доступных карт, я пытаюсь получить доступHighcharts.mapDataIndex, как это объясняется в demo / all-maps, я получаю сообщение об ошибке, что mapDataIndex не определено.

mapDataIndex не определено, потому что это не свойство по умолчанию Highcharts, и вы должны загрузить его (впример загружается отсюда: https://code.highcharts.com/mapdata/index.js?1). Проверьте это описание в highcharts-angular Официальная документация об упаковке, как его загрузить: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper

mapdata.js:

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
}(function (Highcharts) {

...
/* map data content here */
...

}));

В компоненте диаграммы:

require('./mapdata')(Highcharts);

Демонстрация:

• https://stackblitz.com/edit/angular-dm7xfb

РЕДАКТИРОВАТЬ

Картографические данные также можно загрузить с помощью import:

import mapdata from "./mapdata";
import * as worldMap from '@highcharts/map-collection/custom/world.geo.json';

mapdata(Highcharts);

mapdata.js:

export default function (Highcharts) {
   Highcharts.mapDataIndex = {...}
}

Демонстрация:

• https://stackblitz.com/edit/angular-myhyjs