検索
ホームページバックエンド開発PHPチュートリアルECharts と PHP インターフェイスを介して統計グラフのデータ フィルタリングと並べ替えを実装する方法

ECharts と PHP インターフェイスを介して統計グラフのデータ フィルタリングと並べ替えを実装する方法

ECharts と PHP インターフェイスを使用して統計グラフのデータ フィルタリングと並べ替えを実装する方法

最新のデータ分析と視覚化の分野では、ECharts は強力な JavaScript グラフ ライブラリです。 . さまざまなデータ視覚化プロジェクトで広く使用されています。同時に、人気のあるサーバー側プログラミング言語としての PHP を ECharts と組み合わせて、データのフィルタリングと並べ替えに便利なソリューションを提供できます。この記事では、ECharts と PHP インターフェイスを使用して統計グラフのデータ フィルタリングと並べ替えを実装する方法を紹介し、具体的なコード例を示します。

1. PHP 環境をセットアップし、ECharts を構成する

まず、PHP 開発環境をセットアップし、ECharts を構成する必要があります。具体的なインストール手順については、PHP および ECharts の公式ドキュメントを参照してください。

2. HTML ページと JavaScript コードの作成

ルート ディレクトリに HTML ファイルを作成し、index.html という名前を付け、

タグに ECharts 関連のリソース ファイルを導入します。 ##
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts数据筛选和排序示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script src="script.js"></script>
</body>
</html>
同じディレクトリに script.js という名前の JavaScript ファイルを作成し、その中に ECharts 関連のコードを記述します:

// 使用ECharts的示例数据进行演示
var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    {name: '广州', value: 300},
    {name: '深圳', value: 400},
    {name: '成都', value: 500}
];

// 创建ECharts实例
var chart = echarts.init(document.getElementById('chart'));

// 设置图表的配置项和数据
var option = {
    title: {
        text: '统计图'
    },
    tooltip: {},
    xAxis: {
        data: data.map(function(item) {
            return item.name;
        })
    },
    yAxis: {},
    series: [{
        name: '数量',
        type: 'bar',
        data: data.map(function(item) {
            return item.value;
        })
    }]
};

// 使用配置项和数据生成图表
chart.setOption(option);

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

PHP の作成サーバー側に api.php という名前のファイルを作成し、その中にデータのフィルタリングと並べ替えを処理するコードを記述します。

<?php
// 根据请求参数筛选和排序数据
$action = $_GET['action'];

if ($action == 'filter') {
    // 根据条件筛选数据
    $filter = $_GET['filter'];
    // 进行数据筛选的逻辑处理
    // ...

    // 返回筛选后的数据
    echo json_encode($filteredData);
} else if ($action == 'sort') {
    // 根据条件排序数据
    $sort = $_GET['sort'];
    // 进行数据排序的逻辑处理
    // ...

    // 返回排序后的数据
    echo json_encode($sortedData);
}
?>

4. JavaScript コードで PHP インターフェイスを呼び出します。

次のコードをscript.js ファイルを使用して PHP インターフェイスにデータ リクエストを送信し、グラフを更新します:

// 发送筛选请求
function filterData(filter) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var filteredData = JSON.parse(xhr.responseText);
            // 更新图表数据
            option.xAxis.data = filteredData.map(function(item) {
                return item.name;
            });
            option.series[0].data = filteredData.map(function(item) {
                return item.value;
            });
            chart.setOption(option);
        }
    };
    xhr.open('GET', 'api.php?action=filter&filter=' + filter, true);
    xhr.send();
}

// 发送排序请求
function sortData(sort) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var sortedData = JSON.parse(xhr.responseText);
            // 更新图表数据
            option.xAxis.data = sortedData.map(function(item) {
                return item.name;
            });
            option.series[0].data = sortedData.map(function(item) {
                return item.value;
            });
            chart.setOption(option);
        }
    }
    xhr.open('GET', 'api.php?action=sort&sort=' + sort, true);
    xhr.send();
}

// 示例:点击按钮筛选数据
document.getElementById('filterBtn').onclick = function() {
    var filter = document.getElementById('filterInput').value;
    filterData(filter);
};

// 示例:点击按钮排序数据
document.getElementById('sortBtn').onclick = function() {
    var sort = document.getElementById('sortInput').value;
    sortData(sort);
};

5. 実行してテスト

ブラウザでindex.html ファイルを開き、フィルターまたは並べ替えを入力します必要に応じて条件を選択し、対応するボタンをクリックします。 PHP インターフェイスとのデータ対話を通じて、ECharts チャートは返された結果に基づいて自動的に更新され、データのフィルタリングおよび並べ替え機能が実装されます。

概要

上記の手順により、ECharts と PHP インターフェイスを介して統計グラフのデータ フィルタリングと並べ替えを正常に実装できました。特定の PHP インターフェイスを作成し、JavaScript コードでこれらのインターフェイスを呼び出してサーバーとデータをやり取りすることで、チャート データの柔軟な制御を実現し、データのフィルタリングと並べ替えをより便利かつ柔軟に行うことができます。この記事が、ECharts と PHP インターフェイスの関連知識を理解し、適用するのに役立つことを願っています。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか?スカラータイプ、リターンタイプ、ユニオンタイプ、ヌル可能なタイプなど、PHPタイプのヒントはどのように機能しますか?Apr 17, 2025 am 12:25 AM

PHPタイプは、コードの品質と読みやすさを向上させるためのプロンプトがあります。 1)スカラータイプのヒント:php7.0であるため、基本データ型は、int、floatなどの関数パラメーターで指定できます。 3)ユニオンタイプのプロンプト:PHP8.0であるため、関数パラメーターまたは戻り値で複数のタイプを指定することができます。 4)Nullable Typeプロンプト:null値を含めることができ、null値を返す可能性のある機能を処理できます。

PHPは、オブジェクトのクローニング(クローンキーワード)と__Clone Magicメソッドをどのように処理しますか?PHPは、オブジェクトのクローニング(クローンキーワード)と__Clone Magicメソッドをどのように処理しますか?Apr 17, 2025 am 12:24 AM

PHPでは、クローンキーワードを使用してオブジェクトのコピーを作成し、\ _ \ _クローンマジックメソッドを使用してクローン動作をカスタマイズします。 1.クローンキーワードを使用して浅いコピーを作成し、オブジェクトのプロパティをクローン化しますが、オブジェクトのプロパティはクローニングしません。 2。\ _ \ _クローン法は、浅いコピーの問題を避けるために、ネストされたオブジェクトを深くコピーできます。 3.クローニングにおける円形の参照とパフォーマンスの問題を避けるために注意し、クローニング操作を最適化して効率を向上させます。

PHP対Python:ユースケースとアプリケーションPHP対Python:ユースケースとアプリケーションApr 17, 2025 am 12:23 AM

PHPはWeb開発およびコンテンツ管理システムに適しており、Pythonはデータサイエンス、機械学習、自動化スクリプトに適しています。 1.PHPは、高速でスケーラブルなWebサイトとアプリケーションの構築においてうまく機能し、WordPressなどのCMSで一般的に使用されます。 2。Pythonは、NumpyやTensorflowなどの豊富なライブラリを使用して、データサイエンスと機械学習の分野で驚くほどパフォーマンスを発揮しています。

さまざまなHTTPキャッシングヘッダー(例:キャッシュコントロール、ETAG、ラスト変更)を説明してください。さまざまなHTTPキャッシングヘッダー(例:キャッシュコントロール、ETAG、ラスト変更)を説明してください。Apr 17, 2025 am 12:22 AM

HTTPキャッシュヘッダーの主要なプレーヤーには、キャッシュコントロール、ETAG、およびラスト修飾が含まれます。 1.Cache-Controlは、キャッシュポリシーを制御するために使用されます。例:キャッシュコントロール:Max-Age = 3600、public。 2。ETAGは、一意の識別子を介してリソースの変更を検証します。例:ETAG: "686897696A7C876B7E"。 3. Last-Modifiedは、リソースの最後の変更時間を示しています。

PHPでの安全なパスワードハッシュ(例:Password_hash、password_verify)を説明します。 MD5またはSHA1を使用してみませんか?PHPでの安全なパスワードハッシュ(例:Password_hash、password_verify)を説明します。 MD5またはSHA1を使用してみませんか?Apr 17, 2025 am 12:06 AM

PHPでは、Password_hashとpassword_verify関数を使用して安全なパスワードハッシュを実装する必要があり、MD5またはSHA1を使用しないでください。 1)password_hashセキュリティを強化するために、塩値を含むハッシュを生成します。 2)password_verifyハッシュ値を比較して、パスワードを確認し、セキュリティを確保します。 3)MD5とSHA1は脆弱であり、塩の値が不足しており、最新のパスワードセキュリティには適していません。

PHP:サーバー側のスクリプト言語の紹介PHP:サーバー側のスクリプト言語の紹介Apr 16, 2025 am 12:18 AM

PHPは、動的なWeb開発およびサーバー側のアプリケーションに使用されるサーバー側のスクリプト言語です。 1.PHPは、編集を必要とせず、迅速な発展に適した解釈言語です。 2。PHPコードはHTMLに組み込まれているため、Webページの開発が簡単になりました。 3。PHPプロセスサーバー側のロジック、HTML出力を生成し、ユーザーの相互作用とデータ処理をサポートします。 4。PHPは、データベースと対話し、プロセスフォームの送信、サーバー側のタスクを実行できます。

PHPとWeb:その長期的な影響を調査しますPHPとWeb:その長期的な影響を調査しますApr 16, 2025 am 12:17 AM

PHPは過去数十年にわたってネットワークを形成しており、Web開発において重要な役割を果たし続けます。 1)PHPは1994年に発信され、MySQLとのシームレスな統合により、開発者にとって最初の選択肢となっています。 2)コア関数には、動的なコンテンツの生成とデータベースとの統合が含まれ、ウェブサイトをリアルタイムで更新し、パーソナライズされた方法で表示できるようにします。 3)PHPの幅広いアプリケーションとエコシステムは、長期的な影響を促進していますが、バージョンの更新とセキュリティの課題にも直面しています。 4)PHP7のリリースなど、近年のパフォーマンスの改善により、現代の言語と競合できるようになりました。 5)将来的には、PHPはコンテナ化やマイクロサービスなどの新しい課題に対処する必要がありますが、その柔軟性とアクティブなコミュニティにより適応性があります。

なぜPHPを使用するのですか?利点と利点が説明されましたなぜPHPを使用するのですか?利点と利点が説明されましたApr 16, 2025 am 12:16 AM

PHPの中心的な利点には、学習の容易さ、強力なWeb開発サポート、豊富なライブラリとフレームワーク、高性能とスケーラビリティ、クロスプラットフォームの互換性、費用対効果が含まれます。 1)初心者に適した学習と使用が簡単。 2)Webサーバーとの適切な統合および複数のデータベースをサポートします。 3)Laravelなどの強力なフレームワークを持っています。 4)最適化を通じて高性能を達成できます。 5)複数のオペレーティングシステムをサポートします。 6)開発コストを削減するためのオープンソース。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF

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

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 中国語版

SublimeText3 中国語版

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

SublimeText3 Mac版

SublimeText3 Mac版

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