2

iPad アプリの次の図に示すように、グラフを描画する必要があります。利用可能な無料のネイティブ チャート API はありますか?

またはそれを描くための助け...

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

どんな助けもかなりのものです。

4

7 に答える 7

8

Quartz 2Dで行きたいと思います。どの図書館もあなたの取引を行うとは思いません。自分で作成する必要があります。ここに私の考えがあります。

ある種類のチャートでは、速度計がどのように機能するかを理解できます。ええ、私はそのためのリンクを検索しませんでした。アイデアがうまくいくことを願っています。パーセンテージの角度を計算し、それに応じて弧を描くことができます。これは難しいことではありません。

ドロップレットの場合は、少し忙しいでしょう。しかし、ここにそのためのいくつかのロジックがあります:

ドロップレットのようなチャートの各セグメントのパーセンテージがあると思います。それらの半径を計算できます! 下の画像があなたのアイデアをよりよく説明することを願っています。SOは私にコードのようなものを与えることではないので、コードではなくロジックを共有しようとしています:)

お役に立てれば

ここに画像の説明を入力

于 2012-10-09T05:38:38.327 に答える
4

GitHubに作業中のプロジェクトがあります。

#import "PlectrumView.h"

@implementation PlectrumView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
    }
    return self;
}


-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
    CGFloat factor = self.frame.size.width ;
    percentage*=factor;
    UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
                                                   byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
                                                         cornerRadii: CGSizeMake(percentage/2, percentage/2)];
    [color setFill];
    [plectrum fill];
}


- (void)drawRect:(CGRect)rect
{
    [self drawPlectrumWithPercentage:1.0 color:[UIColor colorWithWhite:.9 alpha:1]];
    [self drawPlectrumWithPercentage:.75 color:[UIColor colorWithRed:245.0/255.0 green:134.0/255.0 blue:122.0/255.0 alpha:1]];
    [self drawPlectrumWithPercentage:.61 color:[UIColor colorWithRed:171.0/255.0 green:212.0/255.0 blue:105.0/255.0 alpha:1]];
}

@end

結果は

ここに画像の説明を入力

ピックのコードを変更して、面積が幅ではなくパーセンテージを表すようにします。より自然な感じです。

ピック新しい

-(void) drawPlectrumWithPercentage:(CGFloat) percentage color:(UIColor *)color
{
    static CGFloat pi = 3.141592653589793;
    static CGFloat radius100percent = 50.0;

    static CGFloat area100percent;
    static CGFloat threeFouthPiPlusOne;
    area100percent= radius100percent * radius100percent * pi *3/4 + radius100percent*radius100percent;
    threeFouthPiPlusOne = (1 + (pi*(3.0/4.0)));
    CGFloat area = area100percent * percentage;

    CGFloat newRadius = sqrt(area / threeFouthPiPlusOne);
    percentage = newRadius/ 50.0;
    CGFloat factor = self.frame.size.width ;
    percentage*=factor;
    UIBezierPath* plectrum = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, factor - percentage, percentage,percentage)
                                                   byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight
                                                         cornerRadii: CGSizeMake(percentage/2, percentage/2)];
    [color setFill];
    [plectrum fill];
}
于 2012-10-12T04:27:32.633 に答える
2

SVGを使用する場合は、次のような関数を使用して形状を簡単に作成できます。

/**
 * @param {SVGPathElement} aShape a SVG path element
 * @param {number} radius the radius of the plectrum's arc
 * @param {string} fillColor color in "#rrggbb" format
 */
function drawPlectrum(aShape, radius, fillColor) {

    // Creating a string which defines a path in SVG
    // M = moveto, A = line to, etc. See http://www.w3.org/TR/SVG/paths.html
    var ss="M "+parseInt(0)+" "+parseInt(0)+" ";         // moveto 0, 0
    ss+="L "+parseInt(0)+" "+parseInt(radius)+" ";       // lineto 0, R                
    ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(2*radius)+" ";// elliptic curve to R, 2*R
    ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(2*radius)+" "+parseInt(radius)+" ";// elliptic curve to 2*R, R
    ss+="A "+parseInt(radius)+" "+parseInt(radius)+" 0 0 0 "+parseInt(radius)+" "+parseInt(0)+" ";       // elliptic curve to R, 0
    ss+="Z";                                             // closepath

    // The d attribute of the path element holds the line information
    // In XML the element will essentially be <path d="*the created string*">
    aShape.setAttribute("d", ss);

    // Give the color                
    aShape.setAttribute("fill", fillColor);                
}

連続する図面は次のようになります。

    // Note that 3 different path elements are used to overlap the plectrums
    drawPlectrum(node, 100, "#aaaaaa");
    drawPlectrum(node2, 75, "#33dd33");            
    drawPlectrum(node3, 50, "#3333dd");

編集1： わかりやすくするためにコードにコメントを追加しました

ピック

于 2012-10-10T19:49:14.000 に答える
2

多くの「チャート」ライブラリがあります。

Cocoa Controlsをご覧ください

またはこれ：

メータービュー

于 2012-10-03T20:11:06.110 に答える
2

あなたの例の写真は、実際にはQuartz 2Dを使用して非常に簡単に描画できます。チャートがどのように表示されるかを正確に気にしていない場合は、既存 のものを調べることをお勧めします。表示されているとおりにグラフを表示する必要がある場合 (たとえば、Web アプリに似ている必要があるため)、自分で描画することをお勧めします。あなたが示すような単純なチャートを描くのはそれほど難しいことではありません:

  • テキストに UILabels を使用する
  • 液滴形状のCGPathを使用してレイヤーを作成します。
  • 各チャートの値でレイヤーを移動およびスケーリングします。数行のコードでスムーズにアニメーション化することもできます。

試してみたい場合や詳細が必要な場合はお知らせください。

于 2012-10-03T20:19:55.780 に答える
1

このプロジェクトをダウンロードしてこれを使用しますが、そのために ARC を使用しています。それがあなたを助けることを願っています!

于 2012-09-28T13:05:32.077 に答える
1

上記のすべては、数学コードを使用してサイズ/直径が増加する基礎となる形状を持つ透明な画像を使用しておそらく実行できると思います。

Arc Percentages を使用すると、ダイヤル(available area / 100) * Amount of Progress を配置してから、画像を回転させてダイヤルを所定の位置に配置し、下にある色付きの正方形を左から右に同じ量だけ塗りつぶすことができますか? これにより、コードの描画が大幅に節約されます。

于 2012-10-10T15:29:05.867 に答える