2016-08-26 3 views
6

iOSのファンネルチャートのカスタムコントロールを作成する必要があります(SwiftまたはObjective-Cのいずれか)。iOSでのファンネルチャートの作成?

はそれのためのいくつかのライブラリが見つかりました:https://github.com/ayudasystems/funnel

計画ファンネルチャートを実装するためにBezierPathを使用する:ここにリンクがあります。

このコントロールを実装する必要があるデータ構造をお勧めします。

**注 - 検索ポストの多くが、くぼみは、IOSのファンネルチャートを実装するための厳密解を見つける(いくつかの記事がありますが、答えが正しくないか、受け入れ)

+0

コードサンプルがある場合は、それを繁殖させるために使用されたオード。 –

+0

そのcocoapodライブラリので、dintは多くの機能にアクセスしました。これらを通過してコントロールを作成しました。 –

答えて

2

enter image description here

あなたはファンネルチャート上に実装するための簡単なロジックを使用する必要があります。

は5つの項目があります:A1、A2、A3、A4、A5漏斗はの高さです。

& & A1 = 30%、A2 = 25%、A3 = 20%、A4 = 15%、およびA5 = 10%

Now distritribute items according to height % in funnel. So 

A1 = 0.3*200 = 60 
A2 = 0.25*200 = 50 
A3 = 0.2*200 = 40 
A4 = 0.15*200 = 30 
A5 = 0.1*200 = 20 
-------------------- 
Total   = 200 


On the basis of above calculated height:- 5 different BezierPath can be drawn . 

Above data can be generalised to 'n' items and 'x' Height . 

ロジック計算高さ分布に

class HeightDistribution { 
    class func height(percentages: [Float] , TotalHeight:Float) -> [Float] 
     { 
     var heights = [Float]() 
     for percentage in percentages 
     { 
      let height = (percentage/100)*TotalHeight 
      heights.append(height) 
     } 
     return heights 
    } 
} 

Progress Demo Funnel Chart app || Swift3

0

「データ構造」はシンプルでなければなりません。 0.0〜100.0の値の配列。各値は、横長の矩形帯または漏斗部分の台形のいずれかを表し、矩形から台形に変わる場所を示すインジケータとともに、各セグメントの色を加えたものです。

簡単に開始してから、セグメント、シャドウなどの間にギャップを入れて絵を飾りつけるようにします。静的バージョンを作成したら、レイヤーに転送してアニメーションを取得することができます。

+0

参照やリンクはこれを作成するのに役立ちます。 –

関連する問題