マップを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-12-18 16:06:47

オリジナル

1387 人が閲覧しました

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

はじめに:
データ視覚化の分野では、マップを使用してデータを表示するのが一般的で直感的な方法です。方法。 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}'
        }
    }]
});

ログイン後にコピー

分析コード:

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

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

カスタマイズされたマップデータを準備し、GeoJSON 形式の表現を使用します。。
カスタム GeoJSON データソースをインポートします。例:
```
import CustomMapData from './customMap.geo.json';
```
ログイン後にコピー
ハイマップを初期化するときは、カスタムデータソースとして mapData を指定します。例:
```
Highcharts.mapChart('container', {
 chart: {
     map: CustomMapData
 },
 // ...
});
```
ログイン後にコピー
概要:
この記事では、事前定義されたマップとカスタムマップデータの使用を含め、マップを使用してハイチャートにデータを表示する方法を紹介します。ハイチャートでマップを使用すると、データを視覚的に表示し、データ分析のための視覚的な補助を提供できます。この記事が、読者がデータ視覚化にハイチャートをより効果的に使用するのに役立つことを願っています。
以上がマップを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。