2016-05-18 6 views
1

内のタイトルのようなタイトルでドーナツグラフを描画する方法任意のアイデアとドーナツグラフを描く:スウィフト

enter image description here

私はしかし、誰の成功と、いくつかのライブラリを試してみました。私は各スライスの間にこれらの白い線を作成することはできません。下線付きタイトルはあまりにも難しいです。どんな助けもありがとう!前もって感謝します!

答えて

4

次の例のように、弧を描くようにCABasicAnimationを使用することができます

あなたは以下のライブラリを使用することができます

// e.g. 0.3 is 30% 
func calculateEndAngle(percentageAsDouble: Double) -> CGFloat { 
    let endAngle:CGFloat = CGFloat(2 * M_PI - (M_PI * percentageAsDouble)) 
    return endAngle 
} 

let animationCenter:CGPoint = self.view.center 
let animationRadius:CGFloat = 100.0 
let animationLineWidth:CGFloat = 16.0 
let endAngle = calculateEndAngle(0.3) 
let arcPath = UIBezierPath(arcCenter: animationCenter, radius: animationRadius, startAngle: CGFloat(M_PI), endAngle:endAngle, clockwise: true) 

let arcLayer = CAShapeLayer() 
arcLayer.path = arcPath.CGPath 
arcLayer.fillColor = UIColor.clearColor().CGColor 
arcLayer.strokeColor = UIColor.greenColor().CGColor 
arcLayer.lineWidth = animationLineWidth 

self.view.layer.addSublayer(arcLayer) 
+0

ありがとう!これは良いですが、データによっては角度を計算する方法はありますか? 同様に、30%、50%、20%という3つの値を持っていますか?これら3つのスライスを白い線で描く方法は? – scourGINHO

+0

だから完全な円は2 * M_PIなので、正しい円弧長さ(0.3 * 2 * M_PIは30%ですが、30のどこかに応じて角度をオフセットする必要があります)の開始値と終了値のリストを保持する必要があります。 %開始)。 – Damo

+0

これを示すコードを投稿してください。 ダミーデータを使用する - 50%、30%、20%。どこから始まっても問題ありません。 – scourGINHO