InDesignで円グラフを作成する（3）

2015年08月26日

var pp1 = new Array(); //半円、[[左], [アンカー], [右]]
pp1.push([[x, y+r], [x, y+r], [x+r*d, y+r]]);
pp1.push([[x+r, y+r*d], [x+r, y], [x+r, y-r*d]]);
pp1.push([[x+r*d, y-r], [x, y-r], [x, y-r]]);

半円（円の右半分）のポイント座標を配列に突っ込んでいます。下端、右端、上端の順です。あとから

fan.paths[0].entirePath = pp1;

で、図形のパスに対してこの配列を当てることで、少ない命令で形を変えることができます。

この配列がややこしいので、3行に分けていますが、1行で書くと、
[ [ [最初のポイントの左ハンドルのx座標, 最初のポイントの左ハンドルのy座標],
[最初のポイントのアンカーのx座標, 最初のポイントのアンカーのy座標],
[最初のポイントの右ハンドルのx座標, 最初のポイントの右ハンドルのy座標] ],
[ [2番目のポイントの左ハンドルのx座標, 2番目のポイントの左ハンドルのy座標],
[2番目のポイントのアンカーのx座標, 2番目のポイントのアンカーのy座標],
[2番目のポイントの右ハンドルのx座標, 2番目のポイントの右ハンドルのy座標] ],
... ]
となります。やっぱりややこしい。

var r2 = r * 1.1;
var pp2 = new Array(); //半円マスク
pp2.push([[x, y+r2], [x, y+r2], [x+r2*d, y+r2]]);
pp2.push([[x+r2, y+r2*d], [x+r2, y], [x+r2, y-r2*d]]);
pp2.push([[x+r2*d, y-r2], [x, y-r2], [x, y-r2]]);

もう一度、半円（円の右半分）のポイント座標を配列に突っ込みます。先ほどの半円と中心が同じ（同心円の半分状態）です。こちらの方が前の半円より1.1倍なのですが、特に1.1である必要はなくて、1よりある程度大きければ構いません。1.01でも2でも問題ありません。この半円は何をするものかは、実際に処理を行う行に来たら説明します。

var pp3 = new Array(); //引き出し線
pp3.push([x, y-r*0.9]);
pp3.push([x, y-r*1.1]);
pp3.push([x, y-r*1.2]);

グラフの引き出し線用の配列です。0.9、1.1、1.2は任意の値です。実際に処理するところで説明します。

var doc = app.activeDocument;
var ttxf = doc.textFrames.add();
ttxf.geometricBounds = [y-40, x-r, y-34, x+r];
ttxf.contents = title;

グラフのタイトルを入れるテキストフレームを作成しています。これだけでは文字が入るだけなので、完成形にするにはオブジェクトスタイルを適用したり、テキストに段落スタイルするなどの処理を追加します。

var ovl = doc.ovals.add();
ovl.geometricBounds = [y-r, x-r, y+r, x+r];

グラフの円を作成しています。もし値に「100%」が入った場合にこの円を使用します。それ以外には使用しません。残しておいてもよいし後から削除してもよいです。ここには抜けていますが塗りも線も[なし]です。

var grp = doc.groups.add([ttxf, ovl]);

先ほどのテキストフレームと円をグループ化します。グループ化しておくと移動が楽です。以降作成する図形やテキストフレームはこのグループの中に作成します。