EChartsとphpインターフェースを組み合わせてマルチチャート連携統計図表示を実現する方法
- WBOYオリジナル
- 2023-12-18 10:07:08858ブラウズ
データ視覚化の分野では、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 ファイルの <script> タグを使用して ECharts ライブラリ ファイルを導入し、対応するチャート インスタンスを作成します。コードでは、チャート インスタンスに chart1、chart2、map1、map2 という名前を付けます。 </script>
<!-- 引入ECharts的库文件 -->
<script src="echarts.common.min.js"></script>
<script>
// 创建主地图的图表实例
var map1 = echarts.init(document.getElementById('map1'));
// 创建次地图的图表实例
var map2 = echarts.init(document.getElementById('map2'));
// 创建条形图的图表实例
var chart1 = echarts.init(document.getElementById('chart1'));
// 创建折线图的图表实例
var chart2 = echarts.init(document.getElementById('chart2'));
</script>- データの取得
PHP を使用して、サーバーからデータを取得するインターフェイスを作成します。特定のデータ形式は、実際のニーズに応じて設計できます。この記事では、返されるデータ形式が次のとおりであると仮定します。
{
"map1_data":[...],
"map2_data":[...],
"chart1_data":[...],
"chart2_data":[...],
...
}ここでは、jQuery の .ajax() メソッドを使用してサーバーからデータをリクエストし、リクエスト後に対応する関数を呼び出してグラフを描画します。成功です。
function getData(option) {
$.ajax({
type: "POST",
url: "getdata.php",
data: option,
dataType: "json",
success: function(response) {
drawMap1(response.map1_data);
drawMap2(response.map2_data);
drawChart1(response.chart1_data);
drawChart2(response.chart2_data);
...
}
});
}- グラフの描画
次に、受け取ったデータを使用してマップ、棒グラフ、折れ線グラフを描画する関数を記述する必要があります。この記事では、ECharts API を使用してグラフを描画します。特定の API の使用法については、ECharts の公式ドキュメントを参照してください。
function drawMap1(data) {
// 使用接收到的数据进行地图实例的数据更新
map1.setOption(option);
}
function drawMap2(data) {
// 使用接收到的数据进行地图实例的数据更新
map2.setOption(option);
}
function drawChart1(data) {
// 使用接收到的数据进行条形图实例的数据更新
chart1.setOption(option);
}
function drawChart2(data) {
// 使用接收到的数据进行折线图实例的数据更新
chart2.setOption(option);
}- チャートのリンク
最後のステップでは、チャート間のリンクを実現する必要があります。ユーザーがドロップダウン メニューでオプションを選択すると、それに応じてすべてのグラフが変更されます。
ECharts API のdispatchAction() メソッドを使用して、チャート間のリンクを設定できます。チャートが選択されたら、そのチャートの選択されたデータを他のチャートに渡す必要があります。
option1.on('mapSelect', function(params) {
// 获取地图选中的区域
var selectedData = params.batch[0].selected[0];
// 为条形图和折线图设置选中数据
chart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
chart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: selectedData.dataIndex
});
// 为次地图设置选中数据
map2.dispatchAction({
type: 'mapSelect',
name: selectedData.name,
seriesIndex: 0
});
// 为请求数据添加参数
var option = {
map1_data: selectedData.name,
...
}
// 请求更新数据
getData(option);
});4. まとめ
今回は、EChartsとPHPインターフェースを組み合わせて複数チャート連携の統計グラフ表示を実現する方法を紹介しました。まずは要件を理解した上で、ページレイアウト、EChartsライブラリの呼び出し、データ取得とチャート描画、チャート連携の実現の5つの側面から詳細な実装計画と具体的なコード例を提示しました。この記事を読んだ後、読者は ECharts ライブラリをより適切に適用して、複数のチャートのリンクを使用してデータを視覚化できるようになると思います。
以上がEChartsとphpインターフェースを組み合わせてマルチチャート連携統計図表示を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。