Cara menggunakan peta untuk memaparkan data dalam Highcharts

Cara menggunakan peta untuk memaparkan data dalam Highcharts

Pengenalan:
Dalam bidang visualisasi data, menggunakan peta untuk memaparkan data adalah cara yang biasa dan intuitif. Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan fungsi yang kaya dan pilihan konfigurasi yang fleksibel. Artikel ini akan memperkenalkan cara menggunakan peta untuk memaparkan data dalam Highcharts dan memberikan contoh kod khusus.

Pengenalan kepada data peta:
Apabila menggunakan peta, anda perlu menyediakan data peta terlebih dahulu. Highcharts menyediakan beberapa peta pratakrif, termasuk peta dunia, peta China, dsb., yang boleh digunakan secara langsung. Selain itu, Highcharts juga menyokong data peta tersuai. Data peta tersuai boleh diformat menggunakan GeoJSON, format perwakilan yang biasa digunakan untuk data geografi.

Kod sampel adalah seperti berikut, menggunakan peta dunia untuk memaparkan data:

// 引入 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}'
        }
    }]
});

Kod penghuraian:

1. Mula-mula, kami mengimport perpustakaan Highcharts dan modul peta. Memperkenalkan modul peta memerlukan penggunaan modul/peta dan memanggil modul sebelum permulaan. modules/map 并在初始化之前调用该模块。
2. 然后，我们导入了世界地图的数据源，该数据源使用了 GeoJSON 格式。
3. 初始化 Highcharts 实例，并指定要使用的地图 custom/world。
4. 设置数值轴的最小值为 0。
5. 定义了一个 map 类型的系列，指定了系列的名称、数据源以及数据标签的格式。

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

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

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

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

   Salin selepas log masuk

3. 初始化 Highmaps 时，将 mapData

   Kemudian, kami mengimport sumber data peta dunia, yang menggunakan format GeoJSON.

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