マップチャートの動的更新

1. はじめに

前回はマップチャートのアプリケーションへの適用例と、基本的なWebアプリケーションの作成手順をご紹介しました。前回は、データモデルをファイルから読み込んだので、出力されるチャートは常に静的です。しかし実際の業務アプリケーションにおいては、DBなどから取得したデータをもとに、塗りつぶし色を変えるなどの動的な出力を求められることがほとんどです。WebCharts3Dでは、データモデルをプログラムから作成することで、データと連動した色の設定やテキストの出力、ポップアップの表示内容変更などマップチャートの動的な更新が可能です。

今回は、DBアクセスを想定したマップチャートの動的更新方法をご紹介します。前回作成したマップチャートに修正を加え、データの値に応じて地図を塗り分けるアプリケーションを作成します。

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

前回のサンプルアプリケーションは、以下からダウンロードできます。

サンプルデータ(zip形式)

2. 外観の修正(1)

JSPの修正

はじめにJSP(sample.jsp)を修正し、ユーザーがチャート表示に使用するデータを選択できるようにします。Web画面へ[年の選択]ボックスと[更新]ボタンを追加します。サーブレットへはgetメソッドを使用し、リクエストパラメータ("year")で4桁の年を渡します。

画像「年の選択と更新ボタンを追加」

サンプルコードは下記のようになります。前回作成したJSPに、今回追加した箇所を赤字で示しました。

[sample.jsp]

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.gp.api.jsp.MxServerComponent"%>
<%@ page import="com.gp.api.jsp.MxChartDescription"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample</title>
</head>
<body style="text-align: center;">
<form name="from1" method="get" action="./SampleServlet">
年の選択
<select name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>  <input type="submit" value="更新"><br>
</form>
<%
    MxServerComponent svr = MxServerComponent.getDefaultInstance(application);
    MxChartDescription chart = (MxChartDescription)request.getAttribute("chart");
    out.write(svr.getImageTag(chart, "./getImage.jsp?image="));
%>
</body>
</html>

マップデータの修正

マップチャート上にタイトルとして、ユーザーが選択した年を表示できるようにします。文字列を表示させるために、マップデータを修正しtext要素を追加します。マップエディタを起動し、sample.mapを開きます。

画像「マップエディタでsample.mapを開く」拡大

前回は県名を表示するために$(name)変数を使用しました。$(name)変数はitem要素のname属性を参照します。name属性はマップデータとモデルのツリー構造の関連付けに使用されるため、モデルから値を設定することはできません。
今回はユーザーが選択した年を表示するために、モデルから設定することのできるtitle属性を参照します。title属性を参照するためには$(title)変数を使用します。

  1. ツールバーの[テキスト追加]ボタンをクリックし、グラフィカルビュー内のtext要素を追加したい場所をクリックします。

    画像「テキスト追加ボタンをクリック」拡大

  2. グラフィカルビューに追加されたtext要素を選択し、"$(title)年"と入力します。

    画像「text要素に$(title)年と入力」拡大

  3. フォントを設定します。
    1. text要素を選択します。
    2. ツールバーの[フォント]ボタンをクリックし、[フォント選択]ダイアログボックスを表示します。

      画像「フォントボタンをクリック」拡大

    3. [フォントファミリ]ボックスでは"Dialog"を、[サイズ]ボックスでは"18"を選択し、[太字]チェックボックスをオンにし、[OK]ボタンをクリックします。

      画像「フォント選択ダイアログボックス」

  4. テキストの配置を設定します。
    1. text要素を選択します。
    2. ツールバーの[テキストの配置]ボタンをクリックします。
      [テキストの配置]ツールバーが表示されるので、[中央揃え]ボタンをクリックします。

      画像「中央揃えボタンをクリック」拡大

  5. グラフィカルビューで、text要素の位置とサイズを調整します。

    画像「text要素の位置とサイズを調整」拡大

  6. ツリービューで、追加したtext要素を"関東地方"のitem要素の下へドラッグ&ドロップします。

    画像「関東地方item要素の下へドラッグ&ドロップ」拡大

  7. [ファイル]メニューの[上書き保存]をクリックし、sample.mapを保存します。
【補足情報】

$(~)で記述された変数の事を疑似変数と言います。マップチャートで使用できる疑似変数は以下の4種類です。

疑似変数 参照先
$(name) item要素のname属性
$(value) item要素のvalue属性
$(title) item要素のtitle属性
$(pattern) スタイルのパターンプロパティに設定した値

$(pattern)はスタイルのパターンプロパティに設定した書式を参照します。
例えば、パターンプロパティに"$(name)\n$(value)"と設定し、下記のように使用した場合は、

<map name="root_node">
 <item name="parent_node" popup="$(pattern)">
  <item name="node1"/>
  <item name="node2"/>
  <item name="node3"/>
 </item>
</map>

下記のように設定したことと同等になります。

<map name="root_node">
 <item name="parent_node" popup="$(name)\n$(value)">
  <item name="node1"/>
  <item name="node2"/>
  <item name="node3"/>
 </item>
</map>

3. 外観の修正(2)

スタイルの設定

最終的に生成されるチャートのフォントと背景、影などを調整するために、デザイナを起動しスタイルを設定します。
まず[XMLスタイル]タブの[開く]ボタンをクリックし、[開く]ダイアログボックスからsample_style.xmlを開きます。次に[デザイン]タブを選択し、各プロパティを設定します。

  1. フォントの設定
    1. [フォント]プロパティをクリックし、[フォント選択]ダイアログボックスを表示します。
    2. [フォントファミリ]ボックスでは"Dialog"を、[サイズ]ボックスでは"15"を選択し、[OK]ボタンをクリックします。

      画像「フォント選択ダイアログボックス」

  2. 余白の設定
    1. [余白]プロパティをクリックし、[余白]ダイアログボックスを表示します。
    2. [左]ボックス,[右]ボックス、[上]ボックス、[下]ボックスの全てに"0"と入力し、[OK]ボタンをクリックします。

      画像「余白ダイアログボックス」

  3. 影の設定
    1. [影]プロパティを開き、[Xオフセット]プロパティに"10"、[Yオフセット]プロパティに"10"と入力します。
    2. [色]プロパティをクリックし、影に"999999"の色を選択します。

      画像「色プロパティ」

  4. 背景の設定
    1. [背景]プロパティをクリックし、[背景]ダイアログボックスを表示します。
    2. [ペイント]グループの[タイプ]ボックスで"単一色"を選択します。
    3. [ペイント]グループの[色]ボックスで"cc99ff"の色を選択し、[OK]をクリックします。

      画像「色プロパティ」

  5. 装飾の設定
    1. [装飾]プロパティをクリックし、[装飾]ダイアログボックスを表示します。
    2. [スタイル]ボックスで、"影付き角丸"を選択し、[OK]ボタンをクリックします。

      画像「装飾ダイアログボックス」

  6. スタイルの保存
    1. [XMLスタイル]タブを選択します。
    2. 画面右下の[保存]ボタンをクリックし、sample_style.xmlへ上書き保存します。