XDで円グラフが描きたい！
XDでデザインしている時に円グラフが必要になるシーンがあるかと思います！（あるよねっ！）
配送時間のグラフとか、会社の男女比とか！そんな時に使えるテクニックを見つけたので、共有したいと思います。
完成はこんな感じ〜
XDで円グラフを作成する手順
1. 円を描く
今回はわかりやすく100×100の円を描きました。
2. 塗りを消す
円を選択したままで右のメニューを見ると塗りと線があると思うので、塗りのチェックを外します。
3. 線分に円グラフにする式を入れる
下記の公式を、XD右メニューの線分に入力します。
（書き込む欄が狭いので、一度エディターなどに記述してコピペで貼り付けるのがおすすめかなと思いました。）
100*3.14*0.83 /* 直径×3.14×割合 */※ ちなみに0.83という割合は100%の中の1/6を求めた数字です。なぜこの数字にしようとしたかは覚えてないです。。。
4. 線のサイズを半径の数値を入れる
右メニューのサイズ部分に円の半径（もしくは半径以上）の数値を入力します。
5. 背面にただの円を敷く
今のままではカットされたホールケーキみたいに抜けているので、背景に同じ大きさの円を重ねて円グラフのようにします。
はい、完成。
なかなかのパワープレー感がありますが、とりあえず今はこのやり方で対応していこうかなと思います。
グラフ系のプラグインとか出ると便利かもですね。（需要あるかわからんが、、、）
▼参考サイト
この記事が気に入ったらサポートをしてみませんか？