ご伝授お願いしたく書き込みさせていただきました。
FLASHを使って八角形のレーダーチャートを制作したいのですが、全く分からず困っております。
制作したい形は、八角形(八項目)で
http://www.s-side.com/radar/index.html
こちらの様に見出しA見出しBと二種類が重なる形が希望です。
値は1~5の五段階。それをXML形式で制作したいのですが、色々と検索して探してみてはいるものの、XMLの書き方は分かるのですが、FLASHに関して今だ分かっていません。
どなたかご存知の方だ居ましたら宜しくお願いいたします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
#1~3 です。
すみません。私の取り間違いでした。
「言う端から発言内容をコロコロ変える人なのだろうか???」
「何時間もかけて作ったものをコロコロ変えられては困る...」
と思ってしまっていたのです。
本当にすみません。
> (3)のような多角形ではなく、
> (2)のような多角形が希望とお伝えしたかったのです。
つまりこんな感じですよね↓(多分)。
□□□□□□□□□
□□□■■■□□□
□□■□□□■□□
□■□□□□□■□
□■□□□□□■□
□□■□□□■□□
□□□■■■□□□
□□□□□□□□□
4角形の場合…左回りに全体を 1/8 回転させる
5角形の場合…左回りに全体を 1/10 回転させる
6角形の場合…左回りに全体を 1/12 回転させる
7角形の場合…左回りに全体を 1/14 回転させる
4角形の場合…左回りに全体を 1/16 回転させる
~ ~
と言うことですから,
レーダーチャート全体を 左回りに 1/(タイトル個数×2) 回転させるということになりますね。
全体の点を全部回転させることになるので,
次のようになります。
-------------------------------------------------------
// タイトル用配列 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] = "見出し1";
indexArr[1] = "見出し2";
// データ用配列 dataArr の作成(2次元配列)
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);
}
-------------------------------------------------------
全体を書き替えたので,書き換るだけで1時間以上かかってしまい,
その時間がなかなか取れなかったので,お返事が遅くなってしまいました。
私の勘違いと,返事の遅れの両方でお詫びいたします。
オールActionScriptなので,
ちょっと変える(カスタマイズする)のでも大変ですよ...。
この回答への補足
時間を割いていただきありがとうございます。
回答の通りの形です。大変助かりました。
また、誤解もとけて安心しました。
カスタマイズするとしたら、xmlなどの外部設定を行う方法が一番良いですよね(汗
No.3
- 回答日時:
#1 & #2 です。
> タイトルAのみが一番上にきていると思うのですが
> それがタイトルA・タイトルB、H・C、G・D、F・Eが平行に並ぶ形です。
それって,普通折れ線グラフというのではないでしょうか?
決してレーダーチャートの頂点が2つになっているのではないと思います。
また,
最初の質問とも全く(共通点などほとんど無い)別の質問だと思いますが...(って,かなりあきれている状態ですよ,普通だと軽く数万円取れるような仕事を無償で回答して,全くチャラにされているのですから...。全く無反応の方がまだありがたいです。無反応でも誰か他の人のためにはなります。)。
この回答への補足
いえ、折れ線ではありません。
初めから画像で説明していれば良かったですね。申し訳御座いません。
http://www.coolwebwindow.com/weblife_column/work …
上記の「立方体の描き方」という所に載っている(2)の六角形です。
(3)のような多角形ではなく、(2)のような多角形が希望とお伝えしたかったのです。
※このURLの画像はあくまでも一例ですので六角形にとらわれないで下さい。
ここは質問板でしたので、質問しているのですが、無償でお答えしていただくことに納得いかないのでしたら、有償でお願いしても構いません。
気分を害して申し訳御座いませんでした。
No.1
- 回答日時:
> FLASHに関して今だ分かっていません。
とおっしゃいましても,Flash でこういうことは普通しないでしょうね。
Flashがわかってもわからなくてもあまり関係ないことのように思います。
Excel で言うならば,
ワークシート関数を一切使わず,またオートシェイプも一切手では描かずに,
マクロ(VBA) だけでオートシェイプを操ってグラフを作成するようなものです。
普通そういうことはしません。
それに,
ネット公開を考えなければExcel の マクロ の方が,まだこういうことに向いていると思います。
先に書いておきますが,
一度ActionScriptで作図しだすと,数値などが手動配置できなくなります。
したがって オールActionScript とならざるを得ません。
ここで回答しても,
ActionScript が理解できないと何一つカスタマイズできないと思います。
あと数学(三角関数)も出てきます。
(データの個数や中身はカスタマイズできるようにしてありますけどね。)
> XMLの書き方は分かるのですが、
ということですから,
まるっきり 「丸投げ質問」 ではないようですね。
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] = "見出し1";
indexArr[1] = "見出し2";
// データ用配列 dataArr の作成(2次元配列)
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 というより...,
「計算させて線引いて,計算させて線引いて…」
を繰り返す古典的な数学を利用した図形描画プログラミングという感じです。
> 値は1~5の五段階。
0 も入りますから六段階では???
と思いましたのでその辺もどっちにでもなるように,
// 最高値の設定
max = 5;
と,段階数ではなく最高値を代入する形にしました。
「見出し1」や「見出し2」など「見出し」の表示部分が最高に厄介です。
文字の入るスペースがあまりありません。
この 「見出し」 さえなければ何枚もグラフを重ねることができますが,
今のままのスクリプトでしたら3枚重ねるのがせいぜいだと思います。
またここがなければ,八角形(八項目)でも十角形でも,十四角形できますが,
今のままのスクリプトでしたら十角形がせいぜいだと思います。
スクリプト以前に,置き場所を考えるのが難しいです。
かと言って,
「見出し」 を取ると,どれがどのグラフかわからなくなります。
※ここまで作成しておくと,
XMLデータには何を入れるべきで
何をFlash側に置いておくべきかが
判断しやすくなると思います。
グラフの色も,
ランダムで暗めな色になるようにしていますが,
決定しておきたい場合はXMLに入れておくか,
Flash内に定数で置いておいても良いですね。
※外部XMLをロードする場合,
XMLのノードや属性の値を
上の配列の要素部分に直接置きかえも良いです。
しかし,
面倒であったりスパゲッティになりそうな場合は
上のようなスクリプトを フレーム2 に書いおいて,
フレーム1 で外部 XML をロードさせるようにして,
ロード完了次第,
XMLのそれぞれの値をこれらの配列に代入しておいてから,
フレーム2に進ませるようにすれば楽だと思います。
この回答への補足
ご回答ありがとうございます!
ご丁寧にスクリプトを書いていただいて大変助かりました。
Flashのバージョンは8を使用しておりますので問題御座いません。
随時結果の値を変えたいとすれば、外部からXMLで設定して制作しと方が良いですよね?
また、質問になってしまうのですが。。。例えば・・・今の段階ですと、頂点がひとつの多角形(八角形)になっていますが、これを二つに変える事は可能ですか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- マルウェア・コンピュータウイルス FlashPlayerの削除とマルウェア感染について 5 2023/02/23 20:52
- クラフト・工作 この形状のストーンをご存知の方、教えてください。 1 2022/08/17 11:05
- 数学 問題「キッチンペーパーだけでバウムクーヘンを五等分せよ」 正解は? 5 2022/12/16 22:18
- 数学 画像の中学2年生の数学の問題について教えていただきたいです。 三角形ADCが二等辺三角形であることと 2 2023/01/29 16:14
- DIY・エクステリア 製罐の部品について 1 2023/02/27 19:03
- その他(IT・Webサービス) 見たことのない形式で日付が表示されているのでそれを解析してほしい 3 2023/01/23 16:53
- Excel(エクセル) エクセルのマクロについて教えてください。 1 2023/02/21 09:28
- システム CSVファイルのマッピング処理の省力化 1 2022/11/24 00:01
- クラフト・工作 ストラップや肩紐に後付けできるクリップの様な物 3 2022/10/26 14:51
- 電気工事士 来月から電気管理技術者のお仕事を始める者です。東京電力パワーグリッドへ情報提供の依頼をする方法がTE 1 2022/06/27 06:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別のアプリケーションのテキス...
-
テキストボックスの中身をリセ...
-
変数に256文字以上のテキストを...
-
'2465'指定した式で参照してい...
-
VB6.0 でメニューを作りたいん...
-
VBAからPDFのテキストフィールド
-
多言語を混在できるか。
-
VBSでMid関数を使ったらエラー...
-
エクセルの図形挿入のVBAにて
-
ワードプレスでアンカーテキス...
-
ACCESSフォームで、入力から一...
-
ただただ無駄な
-
DirectXでの読み込みについて
-
python ボタンを押すと複数の関...
-
VBScriptでMsgBoxのYesNoボック...
-
フォームの生成と破棄
-
四乗根を英語で言うと・・・
-
DataTableの件数を取得したい
-
YOASOBI
-
flashのおみくじのような(4桁...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
RPG(AS400)の本、サイトってあ...
-
別のアプリケーションのテキス...
-
テキストボックスの中身をリセ...
-
ホームぺージ制作で間違って重...
-
テキストボックスにセルの値を...
-
コモンダイアログのshowopenに...
-
全てのテキストボックスをセル...
-
漢字入力した値のカタカナ変換...
-
変数に256文字以上のテキストを...
-
VB6.0 でメニューを作りたいん...
-
VB.NET2005 DataGridViewでレコ...
-
DelphiのRichEditでカーソル位...
-
VBSでMid関数を使ったらエラー...
-
MFCのスタティックテキストのコ...
-
改行含むテキストの表示の仕方
-
テキストエリア内の文字列にリ...
-
チェックボックスのテキストを...
-
VB.NETで数十行のプログラムを...
-
HTMLのtextbox類に文字を残す
-
VBのチェックボックス
おすすめ情報