マップを使用してハイチャートにデータを表示する方法

マップを使用してハイチャートにデータを表示する方法

はじめに:
データ視覚化の分野では、マップを使用してデータを表示するのが一般的で直感的な方法です。方法。 Highcharts は、豊富な機能と柔軟な構成オプションを提供する強力な JavaScript グラフ作成ライブラリです。この記事では、マップを使用してハイチャートにデータを表示する方法を紹介し、具体的なコード例を示します。

地図データの紹介:
地図を利用するには、まず地図データを用意する必要があります。 Highcharts は、世界地図、中国地図など、直接使用できるいくつかの事前定義された地図を提供します。さらに、Highcharts はカスタマイズされた地図データもサポートしています。カスタム マップ データは、地理データに一般的に使用される表現形式である GeoJSON を使用してフォーマットできます。

サンプル コードは次のとおりです。世界地図を使用してデータを表示します:

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

分析コード:

1. まず、Highcharts ライブラリとマップ モジュールをインポートしました。 。マップ モジュールを導入するには、modules/map を使用し、初期化前にモジュールを呼び出す必要があります。
2. 次に、GeoJSON 形式を使用する世界地図のデータ ソースをインポートしました。
3. Highcharts インスタンスを初期化し、使用するマップ custom/world を指定します。
4. 数値軸の最小値を0に設定します。
5. 一連のタイプ map を定義し、シリーズの名前、データ ソース、およびデータ ラベルの形式を指定します。

カスタム マップ データ:
カスタマイズされたマップ データを使用する必要がある場合は、次の手順に従うことができます:

1. カスタマイズされたマップ データを準備し、GeoJSON 形式の表現を使用します。 。

2. カスタム GeoJSON データ ソースをインポートします。例:

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

3. ハイマップを初期化するときは、カスタム データ ソースとして mapData を指定します。例:

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

   概要:
   この記事では、事前定義されたマップとカスタム マップ データの使用を含め、マップを使用してハイチャートにデータを表示する方法を紹介します。ハイチャートでマップを使用すると、データを視覚的に表示し、データ分析のための視覚的な補助を提供できます。この記事が、読者がデータ視覚化にハイチャートをより効果的に使用するのに役立つことを願っています。

   以上がマップを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。