PHPインターフェイスとEChartsを介して統計グラフデータを動的にロードする方法-PHPチュートリアル-php.cn

PHPインターフェイスとEChartsを介して統計グラフデータを動的にロードする方法

WBOY

リリース： 2023-12-17 14:28:01

オリジナル

1071 人が閲覧しました

PHPインターフェイスとEChartsを介して統計グラフデータを動的にロードする方法

PHP インターフェイスと ECharts を介して統計グラフデータを動的にロードする方法

[はじめに]
データの視覚化が企業や開発者の間でますます普及するにつれて、 , 統計グラフの応用はますます普及しています。オープンソースの JavaScript グラフライブラリとして、ECharts は豊富なグラフタイプと対話方法を提供し、PHP インターフェイスと組み合わせることで、統計グラフデータを動的にロードできます。この記事では、PHP インターフェイスと ECharts を使用して統計グラフデータを動的にロードする方法の具体的な手順を紹介し、参考用のサンプルコードを提供します。

[手順]

データの準備

まず、表示するデータを準備する必要があります。データはMySQLやAPIなどを通じて取得でき、必要なJSON形式にフォーマットすることができます。ヒストグラムを例にとると、データ形式は次のとおりです。

[
  {
    "name": "数据1",
    "value": 100
  },
  {
    "name": "数据2",
    "value": 200
  },
  {
    "name": "数据3",
    "value": 300
  }
]

ログイン後にコピー

PHP インターフェイスの作成

次に、データを取得するための PHP インターフェイスを作成する必要があります。サンプルコードは次のとおりです。

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

ログイン後にコピー

上記のコードにより、必要な JSON 形式のデータをフロントエンドに返すことができます。

HTML ファイルの作成

次に、HTML ファイルを作成し、ECharts と jQuery ライブラリを導入します。サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ajax メソッドを使用して PHP インターフェイスを呼び出してデータを取得し、ECharts を使用してヒストグラムを描画します。

[概要]
上記の手順により、PHP インターフェイスと ECharts を使用して統計グラフデータを動的に読み込むことができます。まず、表示するデータを準備し、JSON 形式にフォーマットする必要があります。次に、データを取得するための PHP インターフェイスを作成し、そのデータを JSON 形式でフロントエンドに返します。最後に、フロントエンドは ajax を介して PHP インターフェイスを呼び出してデータを取得し、ECharts を使用して対応するチャートを描画します。

【参考コード】
PHPインターフェースコード:

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

ログイン後にコピー

HTMLファイルコード:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

以上がPHPインターフェイスとEChartsを介して統計グラフデータを動的にロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。