検索
ホームページバックエンド開発PHPチュートリアルECharts と PHP インターフェイスを介してリアルタイム統計グラフを表示する方法

ECharts と PHP インターフェイスを介してリアルタイム統計グラフを表示する方法

ECharts と PHP インターフェイスを介してリアルタイムの統計グラフを表示する方法

インターネットとビッグ データ テクノロジの急速な発展により、データの視覚化が重要な部分になりました。 。 ECharts は、優れたオープンソース JavaScript データ視覚化ライブラリとして、さまざまな統計グラフを簡単かつ効率的に表示するのに役立ちます。この記事では、ECharts および PHP インターフェイスを介してリアルタイム統計グラフを表示する方法を紹介し、関連するコード例を示します。

1. 準備
始める前に、いくつかの準備をする必要があります:

  1. ECharts ライブラリをインストールします: ECharts の公式 Web サイト (http: //echarts.apache .org/) を使用して、ECharts ライブラリの最新バージョンをダウンロードし、プロジェクトに導入します。
  2. PHP 環境のインストール: データ インターフェイスを提供するために、単純な PHP 環境を構築する必要があります。 XAMPPやWAMPなどの統合開発環境をインストールしたり、Linuxサーバー上にLAMP環境を構築したりできます。

2. データベースとデータ テーブルの作成
デモンストレーションの便宜上、ここでは 1 時間あたりの注文数を表示することを想定した簡単な例を使用します。まず、注文データを保存するために MySQL データベースにデータ テーブルを作成する必要があります。

CREATE TABLE `orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `time` datetime DEFAULT NULL,
  `count` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

このテーブルには、注文 ID、注文時間、注文数量という 3 つのフィールドが含まれています。

3. PHP インターフェイスの作成
データ インターフェイスのロジックを処理するために、PHP プロジェクトに「api.php」という名前の新しいファイルを作成します。このインターフェースを通じて、最新の注文データを取得できます。簡単な例を次に示します。

<?php
// 引入数据库配置文件
include('config.php');

// 连接数据库
$conn = mysqli_connect($db_host, $db_user, $db_password, $db_name);
if (!$conn) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 获取最新的订单数据
$sql = "SELECT * FROM orders ORDER BY time DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($result);

// 返回JSON格式的订单数据
echo json_encode($row);

// 关闭数据库连接
mysqli_close($conn);
?>

このコードは、まずデータベースに接続し、次に最新の注文データをクエリして、それを JSON 形式で返します。

4. フロントエンド ページを作成する
次に、フロントエンド ページに ECharts ライブラリを導入し、リアルタイムの統計グラフの表示を実現する必要があります。ページに「index.php」という名前を付けるとします。簡単な例を次に示します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实时统计图展示</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 统计图容器 -->
    <div id="chart" style="height: 400px;"></div>

    <!-- JavaScript代码 -->
    <script>
        // 创建ECharts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 定义初始数据
        var data = [];

        // 请求接口获取数据
        function fetchData() {
            // 发送HTTP请求
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var result = JSON.parse(xmlhttp.responseText);
                    var time = new Date(result.time);
                    var count = result.count;

                    // 更新数据
                    data.push({
                        name: time.getHours() + ':00',
                        value: count
                    });

                    // 显示统计图
                    myChart.setOption({
                        xAxis: {
                            data: data.map(function(item) {
                                return item.name;
                            })
                        },
                        series: [{
                            data: data.map(function(item) {
                                return item.value;
                            })
                        }]
                    });
                }
            };
            xmlhttp.open("GET", "api.php", true);
            xmlhttp.send();
        }

        // 循环调用接口,以实现实时刷新
        setInterval(fetchData, 1000);
    </script>
</body>
</html>

この HTML コードでは、最初に ECharts ライブラリを導入し、統計グラフを表示するコンテナをページ内に作成します。次に、JavaScript コードを通じて HTTP リクエスト インターフェイスを実装し、最新の注文データを取得してデータに追加し、最後に ECharts の setOption メソッドを使用して統計グラフを表示します。リアルタイムの更新効果を実現するために、JavaScript の setInterval 関数を使用してインターフェイスを毎秒呼び出します。

5. プロジェクトの実行
ブラウザで「index.php」ページを開くと、リアルタイム統計グラフが表示されます。毎秒、ページはバックエンドにリクエストを送信して最新の注文データを取得し、それを表示するチャートに追加します。

概要: この記事の導入を通じて、ECharts と PHP インターフェイスを介してリアルタイムの統計グラフを表示する方法を学びました。常に最新のデータを取得しチャートを更新することで、データの変化をリアルタイムに監視・表示することができます。これは、データ分析とビジネス上の意思決定に重要な影響を及ぼします。

(注: 上記のコード例は参考用です。具体的な実装は実際の状況に応じて調整されます)

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
PHPセッションを失敗させる可能性のあるいくつかの一般的な問題は何ですか?PHPセッションを失敗させる可能性のあるいくつかの一般的な問題は何ですか?Apr 25, 2025 am 12:16 AM

PHPSESSIONの障害の理由には、構成エラー、Cookieの問題、セッションの有効期限が含まれます。 1。構成エラー:正しいセッションをチェックして設定します。save_path。 2.Cookieの問題:Cookieが正しく設定されていることを確認してください。 3.セッションの有効期限:セッションを調整してください。GC_MAXLIFETIME値はセッション時間を延長します。

PHPでセッション関連の問題をどのようにデバッグしますか?PHPでセッション関連の問題をどのようにデバッグしますか?Apr 25, 2025 am 12:12 AM

PHPでセッションの問題をデバッグする方法は次のとおりです。1。セッションが正しく開始されるかどうかを確認します。 2.セッションIDの配信を確認します。 3.セッションデータのストレージと読み取りを確認します。 4.サーバーの構成を確認します。セッションIDとデータを出力し、セッションファイルのコンテンツを表示するなど、セッション関連の問題を効果的に診断して解決できます。

session_start()が複数回呼び出されるとどうなりますか?session_start()が複数回呼び出されるとどうなりますか?Apr 25, 2025 am 12:06 AM

session_start()への複数の呼び出しにより、警告メッセージと可能なデータ上書きが行われます。 1)PHPは警告を発し、セッションが開始されたことを促します。 2)セッションデータの予期しない上書きを引き起こす可能性があります。 3)session_status()を使用してセッションステータスを確認して、繰り返しの呼び出しを避けます。

PHPでセッションのライフタイムをどのように構成しますか?PHPでセッションのライフタイムをどのように構成しますか?Apr 25, 2025 am 12:05 AM

PHPでのセッションライフサイクルの構成は、session.gc_maxlifetimeとsession.cookie_lifetimeを設定することで達成できます。 1)session.gc_maxlifetimeサーバー側のセッションデータのサバイバル時間を制御します。 0に設定すると、ブラウザが閉じているとCookieが期限切れになります。

セッションを保存するためにデータベースを使用することの利点は何ですか?セッションを保存するためにデータベースを使用することの利点は何ですか?Apr 24, 2025 am 12:16 AM

データベースストレージセッションを使用することの主な利点には、持続性、スケーラビリティ、セキュリティが含まれます。 1。永続性:サーバーが再起動しても、セッションデータは変更されないままになります。 2。スケーラビリティ:分散システムに適用され、セッションデータが複数のサーバー間で同期されるようにします。 3。セキュリティ:データベースは、機密情報を保護するための暗号化されたストレージを提供します。

PHPでカスタムセッション処理をどのように実装しますか?PHPでカスタムセッション処理をどのように実装しますか?Apr 24, 2025 am 12:16 AM

PHPでのカスタムセッション処理の実装は、SessionHandlerInterfaceインターフェイスを実装することで実行できます。具体的な手順には、次のものが含まれます。1)CussentsessionHandlerなどのSessionHandlerInterfaceを実装するクラスの作成。 2)セッションデータのライフサイクルとストレージ方法を定義するためのインターフェイス(オープン、クローズ、読み取り、書き込み、破壊、GCなど)の書き換え方法。 3)PHPスクリプトでカスタムセッションプロセッサを登録し、セッションを開始します。これにより、データをMySQLやRedisなどのメディアに保存して、パフォーマンス、セキュリティ、スケーラビリティを改善できます。

セッションIDとは何ですか?セッションIDとは何ですか?Apr 24, 2025 am 12:13 AM

SessionIDは、ユーザーセッションのステータスを追跡するためにWebアプリケーションで使用されるメカニズムです。 1.ユーザーとサーバー間の複数のインタラクション中にユーザーのID情報を維持するために使用されるランダムに生成された文字列です。 2。サーバーは、ユーザーの複数のリクエストでこれらの要求を識別および関連付けるのに役立つCookieまたはURLパラメーターを介してクライアントに生成および送信します。 3.生成は通常、ランダムアルゴリズムを使用して、一意性と予測不可能性を確保します。 4.実際の開発では、Redisなどのメモリ内データベースを使用してセッションデータを保存してパフォーマンスとセキュリティを改善できます。

ステートレス環境(APIなど)でセッションをどのように処理しますか?ステートレス環境(APIなど)でセッションをどのように処理しますか?Apr 24, 2025 am 12:12 AM

APIなどのステートレス環境でのセッションの管理は、JWTまたはCookieを使用して達成できます。 1。JWTは、無国籍とスケーラビリティに適していますが、ビッグデータに関してはサイズが大きいです。 2.cookiesはより伝統的で実装が簡単ですが、セキュリティを確保するために慎重に構成する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません