So verwenden Sie Karten zur Anzeige von Daten in Highcharts

So verwenden Sie Karten zur Anzeige von Daten in Highcharts

Einführung:
Im Bereich der Datenvisualisierung ist die Verwendung von Karten zur Anzeige von Daten eine gängige und intuitive Methode. Highcharts ist eine leistungsstarke JavaScript-Diagrammbibliothek, die umfangreiche Funktionen und flexible Konfigurationsoptionen bietet. In diesem Artikel wird erläutert, wie Sie Karten zum Anzeigen von Daten in Highcharts verwenden, und es werden spezifische Codebeispiele bereitgestellt.

Einführung in Kartendaten:
Wenn Sie eine Karte verwenden, müssen Sie zunächst Kartendaten vorbereiten. Highcharts bietet einige vordefinierte Karten, darunter Weltkarten, China-Karten usw., die direkt verwendet werden können. Darüber hinaus unterstützt Highcharts auch benutzerdefinierte Kartendaten. Benutzerdefinierte Kartendaten können mit GeoJSON formatiert werden, einem häufig verwendeten Darstellungsformat für geografische Daten.

Der Beispielcode lautet wie folgt und verwendet eine Weltkarte zur Anzeige von Daten:

// 引入 Highcharts 库
import Highcharts from 'highcharts';

// 引入地图模块
import * as MapsModule from 'highcharts/modules/map';

// 引入世界地图数据源
import WorldMap from '@highcharts/map-collection/custom/world.geo.json';

// 初始化地图模块
MapsModule(Highcharts);

// 初始化 Highmaps
Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world',
        borderWidth: 1
    },
  
    title: {
        text: '世界地图展示数据'
    },
  
    colorAxis: {
        min: 0
    },
  
    series: [{
        type: 'map',
        name: '随机数据',
        data: [{
            code: 'CN',
            value: 100
        }, {
            code: 'RU',
            value: 200
        }, {
            code: 'US',
            value: 300
        }],
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});

Parsing-Code:

1. Zuerst haben wir die Highcharts-Bibliothek und das Kartenmodul importiert. Die Einführung des Kartenmoduls erfordert die Verwendung von modules/map und den Aufruf des Moduls vor der Initialisierung. modules/map 并在初始化之前调用该模块。
2. 然后，我们导入了世界地图的数据源，该数据源使用了 GeoJSON 格式。
3. 初始化 Highcharts 实例，并指定要使用的地图 custom/world。
4. 设置数值轴的最小值为 0。
5. 定义了一个 map 类型的系列，指定了系列的名称、数据源以及数据标签的格式。

自定义地图数据：
如果需要使用自定义的地图数据，可以按照以下步骤进行操作：

1. 准备自定义的地图数据，使用 GeoJSON 格式表示。

2. 导入自定义的 GeoJSON 数据源，例如：

   import CustomMapData from './customMap.geo.json';

   Nach dem Login kopieren

3. 初始化 Highmaps 时，将 mapData

   Dann haben wir die Datenquelle der Weltkarte importiert, die das GeoJSON-Format verwendet.

Setzen Sie den Mindestwert der Werteachse auf 0.

Highcharts.mapChart('container', {
 chart: {
     map: CustomMapData
 },
 // ...
});

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Karten zur Anzeige von Daten in Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!