XML を利用したインタラクティブな円グラフの作成
作成日
10 August 2010
ページ ツール |
必要条件
ユーザーレベル
初級
サンプルファイル
- ad_mix_sample.zip (17 KB)
はじめに
この記事では、XMLを利用して円グラフを描画する、簡単なサンプルアプリケーションを作成します。XMLで保存されたデータを読み込んで計算し、データの内容を表示するとともに、円グラフを1%ずつ回転させながら表示します。また、表示されたデータを画面上で直接編集し、画面に反映させることもできます。
xmlファイルを作成する
まず表示するデータを管理するために、XMLファイルを作成します。このサンプルでは、ファイルに保存しておく内容として、各データに以下の項目を用意します。
- データの名前（文字列形式）
- データの値（数値形式）
- データの色（RGB形式）
データの名前は、そのデータのタイトルとして使用し、データの値は表示と計算に使用します。またデータの色は、タイトルなどの文字やグラフの色として使用します。
今回はこの情報を、下記のような構成のXMLとしています。
<?xml version="1.0"?>
< data>
<item>
<item_name>COFFEE</item_name>
<item_value>100</item_value>
<item_color>000000</item_color>
</item>
<item>
<item_name>TEA</item_name>
<item_value>200</item_value>
<item_color>333333</item_color>
</item>
< /data>
ムービークリップを用意する
表示するデータの数やグラフの要素数は、XMLデータによって動的に変更されるので、元となるムービークリップを1つ作成しておき、それをAction Scriptで必要なだけ複製します。複製の元として、以下の2つのムービークリップを用意して、任意の位置に配置します。
- データの表示用ムービークリップ
- 円グラフ表示用ムービークリップ
データ表示ムービークリップには、データ番号、データ名、データの値、パーセンテージを表示するダイナミックテキストを用意しておきます。円グラフ表示ムービークリップには、円を3.6度分切り出した扇形のグラフィックを用意します。このムービークリップは、回転させながら複製するので、基準点が円の中心部分になるように作成します。
xml データの読み込み処理を作成する
var file_name = "dat.xml"; // XMLデータファイル
var xml_data = new XML(); // XMLデータ
//xmlデータをロード
xml_data.load(file_name);
xml_data.ignoreWhite = true;
次に3フレーム目で、データの読み込みの判定を行います。ロードできていない場合は1つ前のフレームに戻り、ロードが終わるまでループします。XMLデータのロードが完了していることの判定は、以下のようなScriptを使用して行います。
if (xml_data.loaded && xml_data.hasChildNodes) {
// ここにロード後の処理を記述
} else {
// 前に戻る
gotoandplay(_currentframe-1);
}
読み込んだデータを計算し、内容を画面に表示する処理を作成する
ロードが終了したら、データ表示の前段階として、データの項目数とデータの値の合計値を計算します。データの項目数は、複製するデータの数となり、データの値の合計値は、各項目のパーセントを計算するために必要です。データの項目数は、<item>ノードの数、つまり<data>ノードの子ノードの数となるので、下記のスクリプトで取得することができます。
item_num = xml_data.firstChild.childNodes.length;
合計値は、各<item_value>ノードの値の合計値となるので、下記のように計算して取得します。
for( i = 0; i < item_num; i++ ) {
sum+=Number(xml_data.firstChild.childNodes[i].childNodes[ITM_VAL].firstChild.nodeValue);
}
これで表示をするための準備が整いました。
次に、取得したデータの表示処理を作成します。
// itemのデータを表示
function disp_item () {
var i = 0;
var mcName = "mc_item";
var clr = 0x00;
for ( i = 0; i < item_num;i++ ) {
// 扱うノードを変数にセット
var NodeData = xml_data.firstChild.childNodes[i];
// 複製するクリップの名前を作成
mcName = "mc_item" + i;
mc_item.duplicateMovieClip( mcName, 100 + i );
// カラーオブジェクトを作成
var clr_obj = new Color( this[mcName] );
// 複製したオブジェクトのプロパティを設定
this[mcName]._y = V_ITM_POS + (V_ITM_MV * i);
this[mcName].txt_no = i +1;
this[mcName].txt_name = NodeData.childNodes[ITM_NAME].firstChild.nodeValue;
this[mcName].txt_value = NodeData.childNodes[ITM_VAL].firstChild.nodeValue;
this[mcName].txt_pct = Math.round (this[mcName].txt_value / sum * 100);
clr = parseInt(NodeData.childNodes[ITM_CLR].firstChild.nodeValue, 16);
clr_obj.setRGB( clr ) ;
}
// ラインのサイズを変更
mc_v_line._height = (V_ITM_MV * item_num);
}
上記のスクリプトのように、先に取得した項目数分だけループし、Y座標をずらしながらムービークリップを複製していきます。複製したムービークリップのテキストボックスには、対応するXMLのデータをセットします。カラーオブジェクトにセットする値は、parseIntを使用して文字列を16進数に変換します。
円グラフ表示処理を作成する
円グラフの表示は、4フレーム目と5フレーム目に、下記のようなスクリプトを記述し、タイムラインを使用してループしながら描画を行います。ループのカウントはpct_cntという変数で制御しています。一回のループで1パーセント分描画し、100パーセント分描画したらストップします。
//4フレーム目の処理
// 100% を越えたら終了
if (pct_cnt > 100) {
stop();
} else {
// ここにグラフを描画する処理を記述
// カウンタをインクリメント
pct_cnt++;
}
//5フレーム目の処理
gotoandplay(_currentframe-1);
グラフの描画は、データ表示と同様に、オブジェクトを複製して行います。但し、データ表示の場合と違って、1データ=1ムービークリップという形ではないので、ループ中にどのデータを描画しているのかを覚えておき、色を切り替えていくことが必要です。
// 複製するオブジェクトの名前を作成
var mcName = "mc_sct" + pct_cnt;
// オブジェクトを複製
mc_sct.duplicateMovieClip( mcName, 200 + pct_cnt );
// カラーオブジェクトを作成
var clr_obj = new Color( this[mcName] );
// 回転
this[mcName]._rotation = pct_cnt * 3.6;
// 下記の条件が満たされる場合、色を切り替え
// （色を切り替えるパーセントの値< 現在表示中のパーセント） && （最後のデータではない）
if (pct_chk < pct_cnt && item_cnt < item_num - 1 ) {
// 次のアイテムに切り替え
item_cnt++;
// 次のアイテムのパーセントをプラス
pct_chk += Number(this["mc_item" + item_cnt].txt_pct);
// カラーオブジェクトにセット
clr=parseInt(xml_data.firstChild.childNodes[item_cnt].childNodes[ITM_CLR].firstChild.nodeValue, 16);
}
// 色をセット
clr_obj.setRGB( clr ) ;
データ編集のインターフェースを作成する
ここまでで、保存されたデータを表示することはできるようになりました。最後に、XMLの内容を書き換えて、それを画面に反映させるための処理を作成します。（尚、書き換えられたXMLをファイルに反映するためには、サーバーサイドスクリプトが必要ですが、今回はその説明は割愛いたします。）
データ編集インターフェースには、次のオブジェクトを配置しユーザーがデータを入力できるようにします。
- 行番号入力テキストボックス
- 名前入力テキストボックス
- 値入力テキストボックス
- RGB値入力テキストボックス
- 更新ボタン
次に更新ボタンをクリックした後に実行する、データ書き換え処理を作成します。XMLデータの書き換えは、通常の変数と同様に、XMLの変数に値をセットすることで実行できます。
function edit_xml () {
var idx_node = 0;
// 表示された行数より大きな数が入力された場合の調整
if ( mc_edit.txt_no > item_num ) {
mc_edit.txt_no = item_num +1;
var cln_node = xml_data.firstChild.childNodes[mc_edit.txt_no -2].cloneNode(true);
xml_data.firstChild.appendChild( cln_node );
}
idx_node = mc_edit.txt_no -1;
xml_data.firstChild.childNodes[idx_node].childNodes[ITM_NAME].firstChild.nodeValue = mc_edit.txt_name;
xml_data.firstChild.childNodes[idx_node].childNodes[ITM_VAL].firstChild.nodeValue = mc_edit.txt_value;
xml_data.firstChild.childNodes[idx_node].childNodes[ITM_CLR].firstChild.nodeValue = mc_edit.txt_clr;
// サーバーのファイルを書き換えるには、ここにsendAndLoadなどの記述をする
}
これで一通りの機能が実装できました。この仕組みを利用すれば、財務データの棒グラフや折れ線グラフ、ショッピングカートなど、Flashを利用した様々なインターフェースへの応用が可能です。
