PHP と Vue.js で動的に更新される水平統計グラフを実装する方法-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

PHP と Vue.js で動的に更新される水平統計グラフを実装する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 am 10:00 AM

php vuejs 動的更新

PHP と Vue.js で動的に更新される水平統計グラフを実装する方法

PHP および Vue.js で動的に更新される水平統計グラフを実装する方法

前書き:
統計グラフは、データ視覚化の重要なコンポーネントの 1 つです。 Web 開発では、PHP がデータの保存と計算を処理するバックエンド言語として使用され、Vue.js がデータとページの対話を表示するフロントエンドフレームワークとして使用されます。この記事では、PHP と Vue.js を組み合わせて、動的に更新される水平統計グラフを実装する方法を紹介します。

1. 準備
開始する前に、次の環境をインストールして構成する必要があります:

サーバー環境: Apache などの PHP コードを実行できるサーバーを構築します。そしてNginxは待ちます。
データベース: MySQL またはその他のリレーショナルデータベースを使用します。

2. バックエンド開発

データベーステーブルの作成
まず、統計データを保存するデータベーステーブルを作成する必要があります。「statistics」という名前のテーブルには、id と value の 2 つのフィールドが含まれています。

CREATE TABLE statistics (
    id INT AUTO_INCREMENT PRIMARY KEY,
    value INT
);

ログイン後にコピー

バックエンドインターフェイス
PHP では、バックエンドインターフェイスを記述することでフロントエンドに提供できます。「api.php」という名前のファイルを作成し、次のコードを記述します。

<?php
// 设置响应头
header('Content-Type: application/json');

// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8', 'your_username', 'your_password');

// 查询数据
$stmt = $db->query('SELECT * FROM statistics');
$statistics = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 返回数据
echo json_encode($statistics);

ログイン後にコピー

上記のコードは、PDO を通じてデータベースに接続し、統計データをクエリし、クエリ結果をフロントエンドに返します。 JSON形式で。

3. フロントエンド開発

ページ構造
フロントエンドで Vue.js を使用してページをレンダリングし、データを処理するには、HTML ファイルを作成する必要があります。 Vue.js CDN リンクを紹介します。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态更新的水平统计图表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <canvas id="chart"></canvas>
    </div>
    <script src="app.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript コード
同じディレクトリに「app.js」という名前のファイルを作成し、次のコードを記述します。
```
new Vue({
    el: '#app',
    data: {
        chartData: []
    },
    mounted() {
        this.getChartData();
    },
    methods: {
        getChartData() {
            fetch('api.php')
                .then(response => response.json())
                .then(data => {
                    this.chartData = data.map(item => item.value);
                    this.renderChart();
                })
                .catch(error => console.error(error));
        },
        renderChart() {
            var ctx = document.getElementById('chart').getContext('2d');
            new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '销售统计',
                        data: this.chartData,
                        backgroundColor: 'rgba(0,123,255,0.5)'
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }
    }
});
```
ログイン後にコピー
上記のコードは、Vue.js を使用して Vue インスタンスを作成し、マウントされたフック関数で getChartData メソッドを呼び出し、フェッチを通じて GET リクエストを送信してバックエンドインターフェイスから返されたデータを取得し、そのデータを chartData に割り当てます。そして、 renderChart メソッドを呼び出して統計を表示します。
4. テスト実行
ブラウザで HTML ファイルを開くと、動的に更新される水平統計グラフが表示されます。追加する必要がある新しい統計データがある場合は、バックエンドインターフェイスを呼び出すことでデータを追加でき、フロントエンドが自動的に最新のデータを取得してグラフを更新します。

結論:
この記事では、動的に更新される水平統計グラフを PHP と Vue.js で実装する方法を紹介します。バックエンドインターフェイスを通じてデータベースから統計データを取得し、Vue.js を使用してフロントエンドにデータを表示し、グラフの動的な更新を実装します。この実装方法は、多くの実際のデータ視覚化シナリオに適用して、ユーザーエクスペリエンスとデータ表示効果を向上させることができます。
以上がPHP と Vue.js で動的に更新される水平統計グラフを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7470

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレードガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

CakePHP の日付と時刻 Sep 10, 2024 pm 05:27 PM

Cakephp4 で日付と時刻を操作するには、利用可能な FrozenTime クラスを利用します。

CakePHP について話し合う Sep 10, 2024 pm 05:28 PM

CakePHP は、PHP 用のオープンソースフレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー

CakePHP ファイルのアップロード Sep 10, 2024 pm 05:27 PM

ファイルのアップロードを行うには、フォームヘルパーを使用します。ここではファイルアップロードの例を示します。

CakePHP バリデータの作成 Sep 10, 2024 pm 05:26 PM

Validator は、コントローラーに次の 2 行を追加することで作成できます。

CakePHP のロギング Sep 10, 2024 pm 05:26 PM

CakePHP へのログインは非常に簡単な作業です。使用する関数は 1 つだけです。 cronjob などのバックグラウンドプロセスのエラー、例外、ユーザーアクティビティ、ユーザーが実行したアクションをログに記録できます。 CakePHP でのデータのログ記録は簡単です。 log()関数が提供されています