PHP インターフェイスと ECharts を使用して地理的位置ベースの統計グラフを生成する方法-PHPチュートリアル-php.cn

PHP インターフェイスと ECharts を使用して地理的位置ベースの統計グラフを生成する方法

WBOY

リリース： 2023-12-17 15:32:02

オリジナル

1126 人が閲覧しました

PHP インターフェイスと ECharts を使用して地理的位置ベースの統計グラフを生成する方法

データ視覚化の分野では、ECharts は非常に人気のあるグラフライブラリとなっています。 PHP 一般的に使用されるバックエンド開発言語として、データ処理やインターフェイス開発にもよく使用されます。この記事では、PHP インターフェイスと ECharts ライブラリを使用して地理的位置ベースの統計グラフを生成する方法を紹介し、具体的なコード例を示します。

まず、次のツールとリソースを準備する必要があります。

PHP 開発環境 (Apache、PHP-FPM など)
ECharts ライブラリ (CDN を通じて導入またはローカルにダウンロードできます)
地理位置情報データ (公開データソースから、または自分で収集できます)

次に、次の手順に従います。 :

ステップ 1: データの準備
まず、地理的位置データを準備する必要があります。このデータには、地理座標 (緯度と経度) と、地図上の各場所の統計を表示するための統計データが含まれている必要があります。このデータは、公的に入手可能なソース (政府データなど) から取得することも、自分で収集することもできます。データを JSON 形式で保存し、各場所をその名前、経度、緯度、統計情報を含むオブジェクトとして保存します。

たとえば、次の地理的位置データがあるとします。

[
  {
    "name": "北京",
    "lng": 116.4074,
    "lat": 39.9042,
    "value": 100
  },
  {
    "name": "上海",
    "lng": 121.4737,
    "lat": 31.2304,
    "value": 200
  },
  ...
]

ログイン後にコピー

このうち、name は場所の名前を表し、lng と lat は経度と緯度を表し、value は統計情報を表します。価値。

ステップ 2: PHP インターフェイスを作成する
次に、地理的位置データをフロントエンドページに提供するための PHP インターフェイスを作成する必要があります。 PHP の関連ライブラリ (json_encode など) を使用してデータを JSON 形式に変換し、HTTP 応答を通じてフロントエンドに返すことができます。

サンプルコード:

<?php
// 读取地理位置数据
$data = json_decode(file_get_contents('data.json'), true);

// 设置CORS头部，允许跨域访问
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: GET');

// 将数据转换为JSON格式并返回
echo json_encode($data);
?>

ログイン後にコピー

このサンプルコードでは、あらかじめ用意した地理的位置データファイル(data.json)をfile_get_contents関数で読み込み、json_encode関数で変換します。は JSON 形式であり、PHP の echo ステートメントを通じてフロントエンドに返されます。

ステップ 3: フロントエンドページを作成する
これで、フロントエンドページを作成し、ECharts ライブラリを使用して、地理的位置に基づいて統計グラフを動的に生成できます。

まず、HTML ページに ECharts ライブラリと jQuery を導入します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基于地理位置的统计图</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="map" style="width: 800px; height: 600px;"></div>

  <script>
    $(document).ready(function() {
      // 请求PHP接口获取地理位置数据
      $.get("api.php", function(data) {
        var mapData = JSON.parse(data);

        // 初始化ECharts图表
        var chart = echarts.init(document.getElementById('map'));

        // 定义地理坐标
        var geoCoordMap = {
          // 在这里填入你的地理位置数据
        };

        // 构造图表数据
        var chartData = [];
        for (var i = 0; i < mapData.length; i++) {
          var geoCoord = [mapData[i].lng, mapData[i].lat];
          chartData.push({
            name: mapData[i].name,
            value: geoCoord.concat(mapData[i].value)
          });
        }

        // 设置图表配置
        var option = {
          tooltip: {
            trigger: 'item'
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo',
            data: chartData,
            symbolSize: function(val) {
              return val[2] / 10; // 通过调整除数，可以调整地点的大小
            },
            label: {
              formatter: '{b}',
              position: 'right'
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }]
        };

        // 设置图表数据并渲染图表
        chart.setOption(option);
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

このサンプルコードでは、jQuery の $.get メソッドを通じて、以前に作成した PHP インターフェイス (api.php) をリクエストします。地理的位置データを取得するため。次に、ECharts ライブラリの echarts.init メソッドを使用してマップを初期化し、チャートオプションを構成します。構成オプションでは、散布図を使用して地理的位置を表し、symbolSize プロパティを設定して位置のサイズを制御します。

最後に、chart.setOption メソッドを使用してグラフオプションをグラフに適用し、地理的位置グラフをレンダリングします。

すべてのプロセスは基本的に完了しました。この HTML ページをブラウザで開くと、地理的位置に基づいた統計グラフを表示できます。

さまざまなニーズやデータ形式に適応するには、実際の状況に応じてコードとスタイルを調整する必要がある場合があることに注意してください。

上記の手順により、PHP インターフェイスと EChart を使用して、地理的位置に基づいた統計グラフを生成することができました。これはデータ可視化や地理情報システムの開発において参考になると思います。この記事が読者にとって役立つことを願っています。

以上がPHP インターフェイスと ECharts を使用して地理的位置ベースの統計グラフを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。