PHP+Mysql+jQuery 中国地図地域データ統計サンプル解説、jqueryサンプル解説_PHPチュートリアル

PHP+Mysql+jQuery中国地図エリアデータ統計例解説、jQuery例解説

今日は実際のアプリケーションで地図にデータを読み込む方法を紹介したいと思います。この記事では、例を組み合わせ、PHP + Mysql + jQuery を使用して、中国の地図上の各省のデータに統計効果をもたらします。

この例は、各州の特定の製品のアクティブ ユーザー数のカウントに基づいており、データは各州のアクティブ ユーザー数に従って、さまざまなレベルとアクティビティ レベルに分けられます。各州は異なる背景色で表示され、実際のアプリケーション要件と一致します。

HTML

まず、headセクションにraphael.jsライブラリファイルとchimamapPath.jsパス情報ファイルを読み込みます。

次に、マップを配置する必要がある本文内の場所に div#map を配置します。

PHP

mapdata という名前の mysql テーブルを用意します。このテーブルには各州の製品のアクティブ ユーザー データが保存されます。 PHP を使用して mysql テーブルのデータを読み取り、読み取ったデータを json 形式で出力し、PHP ファイルに json.php という名前を付けます。

読み取られたデータが地図内の州に確実に対応できるように、mapdata テーブル内の州の順序を chimamapPath.js ファイル内の州の順序と一致させる必要があることに注意してください。

jQuery

まず、jqueryのget()メソッドを使用してjsonデータを取得します。

json データを取得した後、まず json データを配列に変換し、json データ内の各州のアクティブ ユーザー数に応じて、グレードを分けます。 0 ～ 5 のレベルに分けられます。アクティブ ユーザーの数が多いほど、背景色が濃くなり、マップ上に表示されると、さまざまな地域のデータ レベルがはっきりとわかります。

コンパイルされたコードをご覧ください:

上記のコードでは、var fillcolor = Colors[arr[i]]; を使用して対応するレベルの色の値を取得し、st.attr({fill:fillcolor}); を通じて対応する州ブロックに色を塗りつぶします。 。さらに、string2Array() 関数は文字列を配列に変換します。

上記の手順により、各省の異なる背景色で中国の地図が表示され、各省間のアクティブ ユーザー数の違いを識別でき、期待どおりの目標を達成できると思います。この記事は、誰もがヘルプを学ぶのに役立ちます。