EChartsとphpインターフェースを組み合わせてマルチチャート連携統計図表示を実現する方法-PHPチュートリアル-php.cn

EChartsとphpインターフェースを組み合わせてマルチチャート連携統計図表示を実現する方法

データ視覚化の分野では、ECharts は広く使用されているフロントエンドチャートライブラリであり、その強力なデータ視覚化機能はさまざまな業界で求められています。実際のプロジェクトでは、複数のグラフを連動して表示したい場面がよくありますが、本記事では、EChartsとPHPインターフェースを組み合わせて複数のグラフの連動統計図表示を実現する方法と、具体的なコード例を紹介します。

1. 前提条件のスキル

この記事を実践するには、次のスキルを習得する必要があります:

HTML、CSS、および CSS に関する基本的な知識JavaScript;
ECharts の基礎知識;
PHP の基礎知識。

2. 要件分析

私たちの要件は、相互に関連する複数のグラフを 1 ページに表示することであり、これらのグラフは相互にリンクできます。

要件分析は次のとおりです。

ページには、メインマップとセカンダリマップの 2 つのマップがあります。
ページには棒グラフと折れ線グラフがあります。
ページの左側にドロップダウンメニューが表示されます。このドロップダウンメニューには複数のオプションが含まれています。各オプションは、対応するデータのリロードをトリガーし、対応するグラフを更新します。
ドロップダウンメニューでいずれかのオプションを選択すると、すべてのグラフが変更されます。メインマップとサブマップはデータの変更に従い、棒グラフと折れ線グラフも変更されます。更新それに応じて。

3. 実装計画

ページレイアウト

まず、HTML ファイルでページをレイアウトします。「wrap」という名前の div コンテナを作成し、すべてのチャートをこの div コンテナに配置します。このうち、ページスペースを最大限に活用するには、マップコンテナの高さを 100% に設定する必要があります。

<body>
    <div id="wrap">
        <div id="map1" style="height: 100%; width: 60%; float:left; "></div>
        <div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
        <div id="map2" style="height: 100%; width:60%; float:left;"></div>
        <div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
    </div>
</body>

ログイン後にコピー

ECharts の呼び出し

ECharts ライブラリファイルをページに導入する必要があります。このライブラリファイルは、ECharts 公式 Web サイト (https://echarts.apache.org/en/download.html) からダウンロードできます。

HTML ファイルの

人気のチュートリアル

詳細>