2010/10/21

円グラフを生成する

NILScriptのImageユニットには、扇形の描画を行うstrokePie()やfillPie()などのメソッドも用意されています。
これらを使用すれば、円グラフの生成や表示が行なえます。

円グラフを生成するには、下記のようなスクリプトを記述します。
今回は、グラフ化する項目群を格納した配列をitems変数としてスクリプト中に記述していますが、実際にはファイルから読み込んだり何らかの方法で収集して用意してください。
var {Image}=require('Image');
var img=Image.create(256,256,"white");
var items=[
    {count:100,color:0xFF9999},
    {count:80,color:0x99FF99},
    {count:70,color:0x9999FF},
    {count:40,color:0x66FFFF},
    {count:20,color:0xFF66FF},
    {count:10,color:0xFFFF66},
];
var sum=items.sum('count');
var angle=-Math.PI/2;
for(var i=0,l=items.length;i<l;i++){
    var sweep=(Math.PI*2)*(items[i].count/sum);
    img.fillPie(8,8,240,240, angle, sweep,items[i].color);
    img.strokePie(8,8,240,240, angle, sweep,"black");
    angle+=sweep;
}
img.save("pie_graph.jpg",{quality:90});
まず、配列の各要素のcountプロパティの合計値をsum変数に格納しておきます。
次に、グラフの描画開始角度をangle変数に代入します。0が→の向きを表し、一周がMath.PI*2なので、↑の方向から始めるには「-Math.PI/2」を初期値とします。

配列の各項目ごとのループでは、まず各項目の値を全項目の合計値で割った値に一周を表すMath.PI*2を乗算して、各項目の扇形の角度を求めています。
そして、fillPie()でその範囲を塗りつぶし、strokePie()で輪郭を描画します。
両メソッドの最初の4つの引数は、扇形を含む円が内接する長方形の位置と大きさを表します。
第5引数では開始角度、第6引数が扇形の角度を指定します。
第7引数では、今回は単に色を指定していますが、他にも線の太さや塗りつぶし方法などが指定できます。
描画が終ったら、次の項目の開始角度が今回の項目の範囲の直後になるように、今回の項目が占めた角度を加算します。
これで、以下のようなグラフが作成できます。
描画したグラフは、save()メソッドでファイルに保存したり、Window.create()のgraphicsオプションにセットしてウィンドウに表示したりして利用してください。

0 件のコメント:

コメントを投稿