繪製圓餅圖 ( 具有指示線與百分比說明 )
這篇教學會延伸「繪製圓餅圖」教學範例,除了根據資料繪製圓餅圖,還會在圓餅圖裡加上「指示線」以及「資料所佔的百分比」。
快速導覽:
開啟範例
開啟「繪製圓餅圖」的範例,從這個範例進行修改。
替函式增加參數
編輯「繪製扇形」函式,替函式增加色相 h、彩度 d、亮度 v 以及指示 note 四個參數。
修改畫筆積木,根據參數設定來調整顏色、彩度和亮度。
角色增加造型:數字與百分比
切換到角色的「造型」頁籤,使用文字工具繪製 0~9 以及「.」和「%」造型。
造型名稱和內容設定成完全相同,例如「.」的造型名稱就是「.」,「%」的造型名稱就是「%」。
繪製指示線
建立一個名為「指示線」的函式,函式具有 cx、cy、r、deg1、deg2 五個參數。
「指示線」函式內容一開始先設定畫筆為黑色,接著根據 deg1 和 deg2 計算兩個角度的中間角度,從中間角度開始畫線,從半徑的 0.8 倍的位置開始畫線,畫到半徑的 1.2 倍停止。
接著設定顯示角色並調整尺寸 ( 根據個人偏好調整 ),根據 deg2-deg1 在 360 度裡所佔的比例,取得百分比數值,並根據百分比的數值依序取出對應的造型並在舞台裡「蓋章」。
回到「繪製扇形」函式,在最後判斷如果 note 為 1 表示要顯示指示線,就執行「指示線」函式。
繼續前往「執行繪製扇形函式」的程式碼區塊,設定顏色相關參數數值,並將指示參數設定為 1。
最後回到點擊綠旗的程式,隱藏角色並設定方向,圓餅圖的程式就完成了。
完成效果
完成後點擊綠旗,就會自動產生一些資料,接著根據這些資料,在舞台中畫出具有指示線的圓餅圖。
範例解答
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~