Flashでレーダーチャート

質問

ご伝授お願いしたく書き込みさせていただきました。

FLASHを使って八角形のレーダーチャートを制作したいのですが、全く分からず困っております。

制作したい形は、八角形（八項目）で
http://www.s-side.com/radar/index.html
こちらの様に見出しＡ見出しＢと二種類が重なる形が希望です。
値は１～５の五段階。それをＸＭＬ形式で制作したいのですが、色々と検索して探してみてはいるものの、ＸＭＬの書き方は分かるのですが、FLASHに関して今だ分かっていません。

どなたかご存知の方だ居ましたら宜しくお願いいたします。

回答No.4

BlurFiltan

＃１～３ です。

すみません。私の取り間違いでした。
「言う端から発言内容をコロコロ変える人なのだろうか？？？」
「何時間もかけて作ったものをコロコロ変えられては困る...」
と思ってしまっていたのです。
本当にすみません。

> （３）のような多角形ではなく、
> （２）のような多角形が希望とお伝えしたかったのです。

つまりこんな感じですよね↓（多分）。

　□□□□□□□□□
　□□□■■■□□□
　□□■□□□■□□
　□■□□□□□■□
　□■□□□□□■□
　□□■□□□■□□
　□□□■■■□□□
　□□□□□□□□□

　４角形の場合…左回りに全体を 1/8 回転させる
　５角形の場合…左回りに全体を 1/10 回転させる
　６角形の場合…左回りに全体を 1/12 回転させる
　７角形の場合…左回りに全体を 1/14 回転させる
　４角形の場合…左回りに全体を 1/16 回転させる
　　　～　　　　　　　　　　　　　～

と言うことですから，
レーダーチャート全体を 左回りに 1/(タイトル個数×２) 回転させるということになりますね。

全体の点を全部回転させることになるので，
次のようになります。

-------------------------------------------------------
// タイトル用配列 titleArr の作成(タイトル数可変)
titleArr = new Array();
titleArr[0] = "タイトルA";
titleArr[1] = "タイトルB";
titleArr[2] = "タイトルC";
titleArr[3] = "タイトルD";
titleArr[4] = "タイトルE";
titleArr[5] = "タイトルF";
titleArr[6] = "タイトルG";
titleArr[7] = "タイトルH";
// 見出し用配列 indexArr の作成(データ配列のデータ数と等しくする)
indexArr = new Array();
indexArr[0] = "見出し１";
indexArr[1] = "見出し２";
// データ用配列 dataArr の作成(２次元配列)
dataArr = new Array();
// データ(配列)を用意（データ数・要素数共に可変）
dataArr[0] = [4, 2, 2, 4, 3, 5, 1, 2];
dataArr[1] = [2, 3, 5, 1, 3, 2, 4, 4];
// 最高値の設定
max = 5;
// 半径(中心から最高値までの長さ)の設定
long = 150;
// 中心のx座標，y座標 の設定
c_x = 200;
c_y = 220;
// --------- 以上がデータの用意と設定 ---------

// 深度カウント用変数 c の初期化
c = 0;

// TextFormatクラスのインスタンス TF1 を作成
TF1 = new TextFormat();
TF1.color = 0x000000;
TF1.size = 14;
TF1.bold = true;

// タイトル軸の描画とタイトル名の配置
this.lineStyle(1, 0x006600, 100);

for (i=0; i<titleArr.length; i++) {
c++;
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/titleArr.length*i-Math.PI/titleArr.length;
// タイトル軸の描画
this.moveTo(0+c_x, 0+c_y);
this.lineTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);
// タイトル軸の先にテキストフィールドを作成
this.createTextField("title_"+i, c, Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y, 0, 0);
// 文字列に合わせて自動サイズに調節
this["title_"+i].autoSize = true;
// テキストフィールドにタイトル名を代入
this["title_"+i].text = titleArr[i];
// テキストフィールドにテキストフォーマット TF1 を適用
this["title_"+i].setTextFormat(TF1);
// テキストフィールドの x座標 の微調整
this["title_"+i]._x -= this["title_"+i]._width/2;
// テキストフィールドの y座標 の微調整
if (this["title_"+i]._y<=c_y) {
this["title_"+i]._y -= this["title_"+i]._height+10;
} else {
this["title_"+i]._y += 15;
}
}

// 外枠線の描画
this.lineStyle(0, 0xCCCCCC, 100);
// 角度(ラジアン)の算出
rad = -Math.PI/2-Math.PI/titleArr.length;
// 線の描画
this.moveTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);
for (i=1; i<titleArr.length; i++) {
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/titleArr.length*i-Math.PI/titleArr.length;
// 線の描画
this.lineTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);
}

// 角度(ラジアン)の算出
rad = -Math.PI/2-Math.PI/titleArr.length;
this.lineTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);

// グラフの作成
for (i=0; i<dataArr.length; i++) {
// ランダム色の作成
colR = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
colG = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
colB = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
col = "0x"+colR+colG+colB;
//
// TextFormatクラスのインスタンス TF2 を作成
TF2 = new TextFormat();
TF2.color = col;
TF2.size = 12;
TF2.bold = true;
//
// グラフの線と塗りの描画
this.beginFill(Number(col), 20);
this.lineStyle(1, col, 100);
// 角度(ラジアン)の算出
rad = -Math.PI/2-Math.PI/dataArr[i].length;
lng = long*dataArr[i][0]/max;
this.moveTo(Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y);
c++;
// グラフの先にテキストフィールドを作成
this.createTextField("data_"+i+"_"+0, c, Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y, 0, 0);
this["data_"+i+"_"+0].autoSize = true;
this["data_"+i+"_"+0].text = dataArr[i][0];
// テキストフィールドにテキストフォーマット TF2 を適用
this["data_"+i+"_"+0].setTextFormat(TF2);
// テキストフィールドの x座標 の微調整
this["data_"+i+"_"+0]._x -= this["data_"+i+"_"+0]._width/2;
//
for (j=1; j<dataArr[i].length; j++) {
c++;
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/dataArr[i].length*j-Math.PI/titleArr.length;
// 線と塗りの描画
lng = long*dataArr[i][j]/max;
this.lineTo(Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y);
// グラフの先にテキストフィールドを作成
this.createTextField("data_"+i+"_"+j, c, Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y, 0, 0);
this["data_"+i+"_"+j].autoSize = true;
this["data_"+i+"_"+j].text = dataArr[i][j];
// テキストフィールドにテキストフォーマット TF2 を適用
this["data_"+i+"_"+j].setTextFormat(TF2);
// テキストフィールドの x座標 の微調整
this["data_"+i+"_"+j]._x -= this["data_"+i+"_"+j]._width/2;
}
// 角度(ラジアン)の算出
rad = -Math.PI/2-Math.PI/dataArr[i].length;
lng = long*dataArr[i][0]/max;
this.lineTo(Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y);
this.endFill();
//
c++;
// 見出しテキストフィールドを作成
this.createTextField("index_"+i, c, c_x, c_y-long-60+i*15, 0, 0);
this["index_"+i].autoSize = true;
this["index_"+i].text = indexArr[i];
// テキストフィールドにテキストフォーマット TF2 を適用
this["index_"+i].setTextFormat(TF2);
// 見出しの線の描画
this.lineStyle(1, 0x999999, 100);
this.moveTo(this["index_"+i]._x, this["index_"+i]._y+this["index_"+i]._height/2);
// 角度(ラジアン)の算出
rad = -Math.PI/2-Math.PI/dataArr[i].length;
lng = long*dataArr[i][0]/max;
this.lineTo(Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y);
this.lineTo(this["index_"+i]._x, this["index_"+i]._y+this["index_"+i]._height/2);
}
-------------------------------------------------------

全体を書き替えたので，書き換るだけで１時間以上かかってしまい，
その時間がなかなか取れなかったので，お返事が遅くなってしまいました。

私の勘違いと，返事の遅れの両方でお詫びいたします。

オールActionScriptなので，
ちょっと変える（カスタマイズする）のでも大変ですよ...。

補足

時間を割いていただきありがとうございます。
回答の通りの形です。大変助かりました。
また、誤解もとけて安心しました。
カスタマイズするとしたら、xmlなどの外部設定を行う方法が一番良いですよね（汗

回答No.3

BlurFiltan

＃１ ＆ ＃２ です。

> タイトルＡのみが一番上にきていると思うのですが
> それがタイトルＡ・タイトルＢ、Ｈ・Ｃ、Ｇ・Ｄ、Ｆ・Ｅが平行に並ぶ形です。

それって，普通折れ線グラフというのではないでしょうか？

決してレーダーチャートの頂点が２つになっているのではないと思います。
また，
最初の質問とも全く（共通点などほとんど無い）別の質問だと思いますが...（って，かなりあきれている状態ですよ，普通だと軽く数万円取れるような仕事を無償で回答して，全くチャラにされているのですから...。全く無反応の方がまだありがたいです。無反応でも誰か他の人のためにはなります。）。

補足

いえ、折れ線ではありません。
初めから画像で説明していれば良かったですね。申し訳御座いません。
http://www.coolwebwindow.com/weblife_column/work/000080.php
上記の「立方体の描き方」という所に載っている（２）の六角形です。
（３）のような多角形ではなく、（２）のような多角形が希望とお伝えしたかったのです。
※このＵＲＬの画像はあくまでも一例ですので六角形にとらわれないで下さい。

ここは質問板でしたので、質問しているのですが、無償でお答えしていただくことに納得いかないのでしたら、有償でお願いしても構いません。
気分を害して申し訳御座いませんでした。

回答No.2

BlurFiltan

＃１ です。

> 今の段階ですと、頂点がひとつの多角形（八角形）になっていますが、
> これを二つに変える事は可能ですか？

意味がわかりません。
頂点が二つの八角形とは？
十六角形のことですか？

補足

角度を少しずらして見ていただいた感じです。
今ですと、タイトルＡのみが一番上にきていると思うのですがそれがタイトルＡ・タイトルＢ、Ｈ・Ｃ、Ｇ・Ｄ、Ｆ・Ｅが平行に並ぶ形です。
ご理解いただけましたでしょうか。

回答No.1

BlurFiltan

> FLASHに関して今だ分かっていません。

とおっしゃいましても，Flash でこういうことは普通しないでしょうね。
Flashがわかってもわからなくてもあまり関係ないことのように思います。

Excel で言うならば，
ワークシート関数を一切使わず，またオートシェイプも一切手では描かずに，
マクロ（VBA） だけでオートシェイプを操ってグラフを作成するようなものです。
普通そういうことはしません。
それに，
ネット公開を考えなければExcel の マクロ の方が，まだこういうことに向いていると思います。

先に書いておきますが，
一度ActionScriptで作図しだすと，数値などが手動配置できなくなります。
したがって オールActionScript とならざるを得ません。
ここで回答しても，
ActionScript が理解できないと何一つカスタマイズできないと思います。
あと数学（三角関数）も出てきます。
（データの個数や中身はカスタマイズできるようにしてありますけどね。）

> ＸＭＬの書き方は分かるのですが、

ということですから，
まるっきり 「丸投げ質問」 ではないようですね。

XML はFlash内，またはFlash外部に別に準備していただくとして，
データが配列として用意されている状態からのスクリプトを回答します。

新規ドキュメントを作成して，
フレーム1 の空白キーフレームに以下を書くだけで似たようなものができます。

-------------------------------------------
// タイトル用配列 titleArr の作成(タイトル数可変)
titleArr = new Array();
titleArr[0] = "タイトルA";
titleArr[1] = "タイトルB";
titleArr[2] = "タイトルC";
titleArr[3] = "タイトルD";
titleArr[4] = "タイトルE";
titleArr[5] = "タイトルF";
titleArr[6] = "タイトルG";
titleArr[7] = "タイトルH";
// 見出し用配列 indexArr の作成(データ配列のデータ数と等しくする)
indexArr = new Array();
indexArr[0] = "見出し１";
indexArr[1] = "見出し２";
// データ用配列 dataArr の作成(２次元配列)
dataArr = new Array();
// データ(配列)を用意（データ数・要素数共に可変）
dataArr[0] = [4, 2, 2, 4, 3, 5, 1, 2];
dataArr[1] = [2, 3, 5, 1, 3, 2, 4, 4];
// 最高値の設定
max = 5;
// 半径(中心から最高値までの長さ)の設定
long = 150;
// 中心のx座標，y座標 の設定
c_x = 200;
c_y = 200;
// --------- 以上がデータの用意と設定 ---------

// 深度カウント用変数 c の初期化
c = 0;

// TextFormatクラスのインスタンス TF1 を作成
TF1 = new TextFormat();
TF1.color = 0x000000;
TF1.size = 14;
TF1.bold = true;

// タイトル軸の描画とタイトル名の配置
this.lineStyle(1, 0x006600, 100);
for (i=0; i<titleArr.length; i++) {
c++;
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/titleArr.length*i;
// タイトル軸の描画
this.moveTo(0+c_x, 0+c_y);
this.lineTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);
// タイトル軸の先にテキストフィールドを作成
this.createTextField("title_"+i, c, Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y, 0, 0);
// 文字列に合わせて自動サイズに調節
this["title_"+i].autoSize = true;
// テキストフィールドにタイトル名を代入
this["title_"+i].text = titleArr[i];
// テキストフィールドにテキストフォーマット TF1 を適用
this["title_"+i].setTextFormat(TF1);
// テキストフィールドの x座標 の微調整
this["title_"+i]._x -= this["title_"+i]._width/2;
// テキストフィールドの y座標 の微調整
if (i == 0) {
this["title_"+i]._y -= this["title_"+i]._height+15;
} else if (this["title_"+i]._y<=c_y) {
this["title_"+i]._y -= this["title_"+i]._height+10;
} else {
this["title_"+i]._y += 15;
}
}

// 外枠線の描画
this.lineStyle(0, 0xCCCCCC, 100);
this.moveTo(c_x, -long+c_y);
for (i=1; i<titleArr.length; i++) {
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/titleArr.length*i;
// 線の描画
this.lineTo(Math.cos(rad)*long+c_x, Math.sin(rad)*long+c_y);
}
this.lineTo(c_x, -long+c_y);

// グラフの作成
for (i=0; i<dataArr.length; i++) {
// ランダム色の作成
colR = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
colG = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
colB = ("0"+Math.floor(Math.random()*129).toString(16)).substr(-2, 2);
col = "0x"+colR+colG+colB;
//
// TextFormatクラスのインスタンス TF2 を作成
TF2 = new TextFormat();
TF2.color = col;
TF2.size = 12;
TF2.bold = true;
//
// グラフの線と塗りの描画
this.beginFill(Number(col), 20);
this.lineStyle(1, col, 100);
this.moveTo(c_x, -long*dataArr[i][0]/max+c_y);
c++;
// グラフの先にテキストフィールドを作成
this.createTextField("data_"+i+"_"+0, c, 0+c_x, -long*dataArr[i][0]/max+c_y, 0, 0);
this["data_"+i+"_"+0].autoSize = true;
this["data_"+i+"_"+0].text = dataArr[i][0];
// テキストフィールドにテキストフォーマット TF2 を適用
this["data_"+i+"_"+0].setTextFormat(TF2);
// テキストフィールドの x座標 の微調整
this["data_"+i+"_"+0]._x -= this["data_"+i+"_"+0]._width/2;
//
for (j=1; j<dataArr[i].length; j++) {
c++;
// 角度(ラジアン)の算出
rad = -Math.PI/2+2*Math.PI/titleArr.length*j;
// 線と塗りの描画
lng = long*dataArr[i][j]/max;
this.lineTo(Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y);
// グラフの先にテキストフィールドを作成
this.createTextField("data_"+i+"_"+j, c, Math.cos(rad)*lng+c_x, Math.sin(rad)*lng+c_y, 0, 0);
this["data_"+i+"_"+j].autoSize = true;
this["data_"+i+"_"+j].text = dataArr[i][j];
// テキストフィールドにテキストフォーマット TF2 を適用
this["data_"+i+"_"+j].setTextFormat(TF2);
// テキストフィールドの x座標 の微調整
this["data_"+i+"_"+j]._x -= this["data_"+i+"_"+j]._width/2;
}
this.lineTo(c_x, -long*dataArr[i][0]/max+c_y);
this.endFill();
//
c++;
// 見出しテキストフィールドを作成
this.createTextField("index_"+i, c, 50+c_x, c_x-long-30+i*15, 0, 0);
this["index_"+i].autoSize = true;
this["index_"+i].text = indexArr[i];
// テキストフィールドにテキストフォーマット TF2 を適用
this["index_"+i].setTextFormat(TF2);
// 見出しの線の描画
this.lineStyle(1, 0x999999, 100);
this.moveTo(this["index_"+i]._x, this["index_"+i]._y+this["index_"+i]._height/2);
this.lineTo(c_x, -long*dataArr[i][0]/max+c_y);
this.lineTo(this["index_"+i]._x, this["index_"+i]._y+this["index_"+i]._height/2);
}
-------------------------------------------

Flash のバージョンを書かれていませんが，
書かれていらっしゃるURLに合わせて Flash MX 以上で作成できるスクリプトにしました。
FlashPlayer6 以上で閲覧可能。ActionScript1.0 です。

ActionScript というより...，
「計算させて線引いて，計算させて線引いて…」
を繰り返す古典的な数学を利用した図形描画プログラミングという感じです。

> 値は１～５の五段階。

0 も入りますから六段階では？？？
と思いましたのでその辺もどっちにでもなるように，

// 最高値の設定
max = 5;

と，段階数ではなく最高値を代入する形にしました。

「見出し１」や「見出し２」など「見出し」の表示部分が最高に厄介です。
文字の入るスペースがあまりありません。
この 「見出し」 さえなければ何枚もグラフを重ねることができますが，
今のままのスクリプトでしたら３枚重ねるのがせいぜいだと思います。
またここがなければ，八角形（八項目）でも十角形でも，十四角形できますが，
今のままのスクリプトでしたら十角形がせいぜいだと思います。
スクリプト以前に，置き場所を考えるのが難しいです。
かと言って，
「見出し」 を取ると，どれがどのグラフかわからなくなります。

※ここまで作成しておくと，
　 XMLデータには何を入れるべきで
　 何をFlash側に置いておくべきかが
　 判断しやすくなると思います。
　 グラフの色も，
　 ランダムで暗めな色になるようにしていますが，
　 決定しておきたい場合はXMLに入れておくか，
　 Flash内に定数で置いておいても良いですね。

※外部XMLをロードする場合，
　 XMLのノードや属性の値を
　 上の配列の要素部分に直接置きかえも良いです。
　 しかし，
　 面倒であったりスパゲッティになりそうな場合は
　 上のようなスクリプトを フレーム2 に書いおいて，
　 フレーム1 で外部 XML をロードさせるようにして，
　 ロード完了次第，
　 XMLのそれぞれの値をこれらの配列に代入しておいてから，
　 フレーム2に進ませるようにすれば楽だと思います。

補足

ご回答ありがとうございます！
ご丁寧にスクリプトを書いていただいて大変助かりました。
Flashのバージョンは８を使用しておりますので問題御座いません。
随時結果の値を変えたいとすれば、外部からＸＭＬで設定して制作しと方が良いですよね？
また、質問になってしまうのですが。。。例えば・・・今の段階ですと、頂点がひとつの多角形（八角形）になっていますが、これを二つに変える事は可能ですか？