スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

円グラフを描画する

イワユル円グラフを表示するサンプルです。





A,B,Cの入力欄に数値を入力して「実行」ボタンを押すと、入力値の比率に応じた円グラフが描画されます。

どうやって描画してるかってーと、

  1. 鋭角が1度の三角形のスプライトをグルッと360度分作る(非表示で)
  2. データの比率にあわせて、作成したスプライトをColorTransformで着色
  3. ENTER_FRAMEイベントでスプライトを表示していく
といったカンジです。今回のサンプルではこのへんの処理をSpriteを継承したクラスにまとめてみました。

で、そのクラス(PieChart.as)のソースコードはこんなカンジです。
package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
/**
* 円グラフ。
*/
public class PieChart extends Sprite {
/** 半径 */
private var _radius:Number;
/** 円グラフを構成するスプライトの配列 */
private var _sector_array:Array;
/** 描画速度 */
private var _draw_speed:Number;
/** データの配列 */
private var _data_array:Array;
/** 表示インデックスカウンタ */
private var _cnt:int;
/**
* コンストラクタ。
* @param radius 円グラフの半径
* @param drawSpeed 描画速度
*/
public function PieChart(radius:Number = 100,
drawSpeed:uint = 1) {
_radius = radius;
_draw_speed = drawSpeed;
_sector_array = new Array();
// 一周分のスプライトを生成
for (var i:int = 0; i < 360; i++) {
var sec:Sprite = createSector(i);
addChild(sec);
_sector_array.push(sec);
}
_data_array = new Array();
}
/**
* 単位各のスプライトを生成し、戻します。
* @param startAngle 開始角度
* @return 生成したスプライト
*/
private function createSector(startAngle:Number):Sprite {
var sector:Sprite = new Sprite();
var l:Number = _radius / Math.cos(Math.PI / 360);
var startRad:Number = startAngle * Math.PI / 180;
var endRad:Number = (startAngle + 1) * Math.PI / 180;
var g:Graphics = sector.graphics;
g.beginFill(0x000000, 1.0);
g.moveTo(0, 0);
g.lineTo(l * Math.sin(startRad), -l * Math.cos(startRad));
g.lineTo(l * Math.sin(endRad), -l * Math.cos(endRad));
g.endFill();
sector.visible = false;
return sector;
}
/**
* データを追加します。
* @param value 値
* @param color 色
* @param alpha 透過度
*/
public function addData(value:Number,
color:uint,
alpha:Number = 1.0):void {
_data_array.push({value:value, color:color, alpha:alpha});
}
/**
* データをクリアします。
*/
public function clearData():void {
_data_array = new Array();
}
/**
* 描画を開始します。
*/
public function startDraw():void {
var total:Number = 0;
for each (var data:Object in _data_array) {
total += data.value;
}
var accDegree:Number = 0;
for (var i:int = 0, iEnd:int = _data_array.length;
i < iEnd; i++) {
data = _data_array[i];
var degree = Math.ceil(360 * data.value / total);
for (var d:int = 0; d < degree; d++) {
var idx:int = accDegree + d;
if (idx < _sector_array.length) {
var sector:Sprite = _sector_array[idx];
var ct:ColorTransform = new ColorTransform();
ct.alphaMultiplier = 0;
ct.alphaOffset = data.alpha * 255;
ct.color = data.color;
sector.transform.colorTransform = ct;
sector.visible = false;
}
}
accDegree += degree;
}
// onEnterFrameハンドラで表示
_cnt = 0;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* フレーム毎の処理です。
* @param evt イベントオブジェクト
*/
private function onEnterFrame(evt:Event):void {
for (var i:int = 0; i < _draw_speed; i++) {
if (_cnt + i < _sector_array.length) {
_sector_array[_cnt + i].visible = true;
}
}
_cnt += _draw_speed;
if (_cnt > _sector_array.length) {
evt.target.removeEventListener(Event.ENTER_FRAME,
evt.target.onEnterFrame);
}
}
}
}
まずコンストラクタですが、一応円グラフの半径と描画スピードを指定できるようにしてます。コンストラクタ内でcreateSectorメソッドを使って360個のスプライトを作成、addChildしています。

createSectorメソッドは、指定した角度を基準に鋭角が1度の三角形のSpriteオブジェクトを生成しています。この時点は色は0x000000で、非表示です。

データの追加はaddDataメソッドで行います。このメソッドでは値/色/透過度を指定できるようになっていて、これらをプロパティに持つオブジェクトを配列に追加します。

円グラフの表示はstartDrawメソッドでやってます。addDataメソッドで追加されたデータの値からソレゾレの比率を出して、それに相当する部分の三角形スプライトの色をtransform.colorTransformプロパティで変更しています。
また、Event.ENTER_FRAMEイベントでonEnterFrameメソッドが呼ばれるようにしています。

onEnterFrameメソッドは、コンストラクタで指定された描画スピード分ずつ三角形スプライトのvisibleをtrueにしていきます。全部表示し終わったら、自身をremoveEventします。

このクラスを使うフラッシュのフレームアクションはこんなカンジです。
// PieChartインスタンス生成
var pieChart = new PieChart(100, 4);
addChild(pieChart);
// 位置
pieChart.x = stage.stageWidth / 2;
pieChart.y = stage.stageHeight / 2;
// ドロップシャドウ
pieChart.filters = [new DropShadowFilter()];
// 実行ボタン押下イベントハンドラ
exec_btn.addEventListener(MouseEvent.MOUSE_UP,
function (e:Event) {
pieChart.clearData();
// データ設定
pieChart.addData(Number(a_txt.text), 0xFF0000, 0.5);
pieChart.addData(Number(b_txt.text), 0x00FF00, 0.5);
pieChart.addData(Number(c_txt.text), 0x0000FF, 0.5);
// 描画開始
pieChart.startDraw();
});
まず半径100、速度4でPieChartのインスタンスを生成してaddChild、位置をステージ中央に配置してます。あと、DropShadowFilterで描画した円グラフに影がつくようにしてます。

exec_btnは右上に配置してある「実行」ボタンです。コレをクリックしたときに、3つのテキスト入力フィールドa_txt, b_txt, c_txtの値をPieChart#addDataしてます。色はソレゾレ赤/緑/青で透過度は0.5デス。

そんで、PieChart#startDrawメソッドを実行してます。これで円グラフが表示されるという寸法デス。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.08.01 | | Comments(6) | Trackback(0) | Flash CS3

コメント

素晴らしい

今、人の悩みを分析して円グラフで描画するサイトを作ろうと思っているのですが、なにぶんにわかプログラマーなもので、グラフを表示する方法がさっぱり分かりません。

ネットでいろいろ見て回りましたが、百匹目の猿さんのグラフがビジュアル的に最も目に付くもので、是非使わせていただきたいと思うのですが。

phpは勉強中で、フォームに計算値を入れるところまではできると思うのですが、asファイルとフラッシュファイル(flaですか?)に関しては扱い方が全く分かりません。

大雑把にでも解説していただけるとうれしいのですが。

お暇な時でも構いません。何卒よろしくお願い致します。

2008-01-12 土 01:42:10 | URL | のりくん #- [ 編集]

phpで算出した結果を円グラフで表示したいってことですよね?

ココに書いてあるスクリプトを使うなら、何らかの方法で値を受け取ってソレを円グラフで表示するFlash(swfファイル)を作成しなきゃならないデス。

例えば、HTML中でFlashを表示するときに、FlashVarsというパラメータを使ってFlashにデータを渡す方法があるのでコイツを使うとします。

その場合だと、上記フレームアクションのスクリプトでは、ボタンを押したときにpieChart#addDataするのをやめて、loaderInfo#parametersから取り出した値をpieChart#addDataするようなカッコウになります。

でその上で、おそらくphpでHTMLを生成するときに、FlashVarsパラメータに適切な値を渡すようにしてやるのが比較的簡単なやり方かなあ。と思いますが、オレはphpはまったくやったことないので書き方とかはわからないデス。

個人的にはphpを勉強中でさらにFlashもとなるとちょっとキビシイんじゃないかと思うので、phpから使えるできあいのグラフツールを利用するのがイイんじゃないかと思います。

2008-01-12 土 02:35:53 | URL | HundredthMonkey #ZJmJft5I [ 編集]

ありがとうございます!

早速のお返事ありがとうございます。
過去のエントリーだったので、目に留まらないかと思っていましたので。本当に嬉しいです。

flaのほうに、値を渡してあげなきゃいけないということですね。

そのためにはswfが必要ということですか。。。

あれからまた色々とサンプルスクリプトをダウンロードしていろいろといじってみたのですが、確かにswfファイルが付随しているものがありました。

ここら辺に関してはやはりまだまだ先の話になるのでしょうね。

ここはおとなしくASPでも使おうかと思います。

お時間を割いていただいてありがとうございます。

いつかこのグラフを使えるようにがんばります。

2008-01-12 土 11:30:23 | URL | のりくん #- [ 編集]

質問です

百匹目の猿さんのasをもとに(コピペ)同じような円グラフを作ろうとしたんですが、
”1180:未定義である可能性の高いメソッドPieChartの呼び出しです”
とコンパイルエラーが出てうまく作動しません。
外部asの他に、テキスト入力フィールドa_txt、b_txt、c_txtと、mc(exec_btn)を置きました。
環境はmac10.5.6、flash cs3(as3)です。
すべて理解している訳ではないので、なぜerrorが出るのか見当がつきません。。
教えていただけないでしょうか。よろしくお願いいたします。

2009-06-08 月 16:12:40 | URL | nonkasvas #- [ 編集]

Re: 質問です

コンパイル時にクラス定義がみつからないみたいですね。
PieChart.as ファイルをクラスパスが通っている場所においてあるかどうか確認してください。
特にクラスパスを設定していないならflaファイルと同じディレクトリに置いてためしてみてください。

2009-06-20 土 00:40:07 | URL | HundredthMonkey #- [ 編集]

返信遅れて申し訳ありません

flaファイルとasファイル、同じディレクトリに入っていて、asファイルもそのflaファイルを指しています。しかし、未だに同じエラーが出ます。。一から理解できるよう勉強してみます。ありがとうございました。

2009-09-08 火 11:56:22 | URL | nonkasvas #- [ 編集]

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。