Weltkarte Pfade Daten in reagieren hohe Charts

Question

Ich betrachte die highmaps Dokumentation reagieren und es scheint, als wären sie fest einprogrammiert haben/die Kartendaten gespeichert:

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

ich in viele kleine zu sehen obwohl Tutorials, dass die Daten aus hohen Karten kommen von selbst nur einen Schlüssel wie diese

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

vorbei

Beispiel Siehe hier: http://jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/maps/tooltip/usehtml/

Aber da ich eine reine reactJS/nodeJS-App schreibe, habe ich mich gefragt, ob es einen Weg in pure react gibt, die Pfaddaten für Weltkarten einzuziehen? Wird dies eingesetzt, um hohe Karten irgendwo zu reagieren?

Answer 1

Nach der official Highcharts documentation Sie manuell die die Karte Skript enthalten:

Kurz gesagt, die GeoJSON Version der Karte in einem Script-Tag in die Seite geladen wird. Dieses GeoJSON-Objekt wird dann im Objekt Highcharts.maps registriert und im Setup des Diagramms auf die Option mapData angewendet.

Wie Sie in the fiddle Sie erwähnt sehen können, enthalten sie die Karte mit dem Skript-Tag:

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

Durch das obige Skript enthalten, die Karte in Highcharts.maps['custom/world'] zur Verfügung steht.

Also im React-Modul müssen Sie manuell die gewünschten Karten hinzufügen, wie in der von Ihnen erwähnten Demo. Zum Beispiel, wenn Sie die Weltkarte hinzufügen möchten, dann:

1. es von hier: https://code.highcharts.com/mapdata/custom/world.js
2. Highcharts.maps["custom/world"] = Ersetzen mit module.exports = in der obigen Datei.
3. Legen Sie die Karte in Ihrer Komponente const map = require('./maps/world');
4. Dann können Sie es in der Config gibt es keine Modul mapData: map

Ich verstehe, dass Sie den obigen Vorgang überspringen wollen, sondern verweist auf Reagieren, der folgendes beinhaltet die Karte.

---

Eigentlich ist es eine hackish, wie Sie es tun können ... In der HTML-Datei, in der die Skripte reagieren enthalten sind, dort können Sie world.js Script-Tag enthalten, aber zuerst müssen Sie sicherstellen, dass Highcharts.maps-Objekt-Array existiert. Auf diese Weise werden Sie die Karten extern verwenden.

Allerdings ist dies eine schlechte Praxis, weil Ihre React-Komponenten von diesem Kartenskript abhängig sein werden.

Gute Praxis ist Ihre Lieferantenmodule über Paketmanager zu verwalten und die Module in den Komponenten zu referenzieren.Auf diese Weise sind die Komponenten selbstbeschreibend