マップチャートの基本

1. はじめに

WebCharts3Dは、棒グラフや円グラフなど数値データをグラフ化するチャートのほかに、地理地図やフロアレイアウト、座席表などのエリア情報を表すマップチャートをサポートしています。
マップ上のエリアは任意の色で塗りつぶしたり、数値データやカテゴリ、ステータスなどエリアに関連する各種情報を表したりすることができます。
また、任意の位置に文字列や画像を配置することで、エリアに関する付加情報を表示させることも可能です。
今回はマップチャートの基本として、アプリケーションへの適用例とマップチャートを表示するWebアプリケーションの開発手順をご紹介します。

画像「マップチャートの基本」拡大

2. アプリケーションへの適用例

マップチャートの機能で、どのようなアプリケーションを作ることができるのかをご紹介します。

以下の表はマップチャートの主な機能をまとめたものです。

機能 説明
塗りつぶし エリアを任意の色で塗りつぶします
テキスト出力 マップ上に任意のテキストを表示します
イメージ出力 マップ上に任意の画像を表示します
クリックアクション エリアクリック時に、URLまたはJavaScriptを呼び出します
ポップアップ エリア上へのマウスホバーでポップアップラベルを表示します

※ 塗りつぶしの色や表示テキストなどは、アプリケーション実行時に動的に変更できます

では、これらの機能を組み合わせたアプリケーションへの適用例を見てみましょう。

例1 地域ごとの統計データの表示

年間生産量などの統計データに応じて都道府県を塗り分けることができます。
また、都道府県のエリア上へのマウスホバーでデータをポップアップ表示し、クリックアクションで詳細データへ画面遷移させることができます。

画像「例1 地域ごとの統計データの表示」拡大

塗りつぶし
テキスト出力 -
イメージ出力 -
クリックアクション
ポップアップ

例2 フロアマップからショップのページへ

店舗種別での色の塗り分けや、店舗をクリックすることで各店舗案内や施設案内へ画面遷移させることができます。

画像「例2 フロアマップからショップのページへ」拡大

塗りつぶし
テキスト出力
イメージ出力 -
クリックアクション
ポップアップ -

例3 バスの座席予約

予約済みの座席と空席を異なる色で塗り分けることで区別することができます。
また、座席をクリックすると直接予約ページへ画面遷移させることができます。

画像「例3 バスの座席予約」拡大

塗りつぶし
テキスト出力
イメージ出力 -
クリックアクション
ポップアップ -