マップチャートの基本

4. マップチャートの作成 – チャートの実装

保存したマップデータを使用し、マップチャートを作成します。

マップチャートの新規作成

  1. [チャートギャラリー]で左側の[マップ(国)]または[マップ(地域)]をクリックします。
  2. 任意の地図を選択します。
  3. [OK]をクリックします。

    画像「チャートギャラリー」拡大

マップデータの読み込み

マップエディタで作成したマップデータを読み込みます。

  1. 右ペインの[ソース]プロパティの[…]をクリックします。
  2. [開く]ダイアログボックスで、さきほど保存したsample.mapを選択します。

    画像「マップデータの読み込み」拡大

アクションの設定

ユーザーがマップ上のどこかの県をクリックしたときに、その県の情報ページが表示されるようにアクションを設定します。
右ペインの[アクション]プロパティに"http://ja.wikipedia.org/wiki/$(name) "と入力します。
東京都area要素のクリック時に、$(name)が”東京都”に置き換えられ、
"http://ja.wikipedia.org/wiki/東京都"のページへ遷移できます。

スタイルの保存

ここまでの設定内容をスタイルファイルへ保存します。

  1. 画面下部の[XMLスタイル]タブを選択します。

    画像「XMLスタイルタブ」

  2. 画面下部右側の[保存]をクリックし、sample_style.xmlとして任意のフォルダに保存します。

    画像「保存します」拡大

データモデルの作成と保存

マップデータに設定した県ごとのitem要素に対し、塗りつぶし色とポップアップテキストを設定します。これらの設定はデータモデルに対して行います。
item要素の属性は、そこに含まれるすべての子要素へ反映されます。例えば、23区それぞれのarea要素を東京都というitem要素に含め、東京都の塗りつぶし色に赤を設定すると、23区すべてが赤く塗りつぶされます。

  1. 画面下部の[XMLモデル]タブを選択します。
  2. 画面左下の[生成]をクリックします。マップデータに対応したデータモデルが自動的に出力されます。

    画像「データモデルの出力」拡大

  3. 各県の色を設定します。
    backColor属性の値の先頭に’#’を付けてRGBの16進表記で設定します。

    画像「色の設定」

  4. map要素のpopup属性が”$(name)”となっていることを確認します。
  5. [適用]ボタンをクリックします。
  6. 編集したXMLコード全体をコピーしてテキストエディタなどに貼り付け、ファイル名をsample_model.xml、文字コードをUTF-8にして任意のフォルダへ保存します。
【補足事項】データモデルとマップデータの関連性

データモデルとマップデータはitem要素のname属性をキーとしたツリー構造として関連付けられています。マップデータの”関東地方”の階層に含まれるitem要素”東京都”は、データモデルにおいても”関東地方”の階層に”東京都”として定義しなければなりません。
今回は、WebCharts3Dデザイナで自動生成されたデータモデルを元に作成していますが、サーブレット等のプログラム内でデータモデルを作成するときは、マップデータのツリーと同じ構造になるよう注意して下さい。

(例)東京都をマップチャートに描画する場合
モデル内の“関東地方”の下の“東京都”を参照し、属性値(backColorなど)を取得
マップデータ内の“東京都”に含まれるアイテム(area.textなど)をモデルから取得した属性値を使用して順番に描画

画像「データモデルとマップデータの関連性」拡大