Objective c iPad应用程序的自定义图表

Objective c iPad应用程序的自定义图表,objective-c,ios,cocoa-touch,charts,Objective C,Ios,Cocoa Touch,Charts,我必须为iPad应用程序绘制下图所示的图表。有免费的本地图表api吗 或者有人帮忙画 任何帮助都是值得的。并使用此功能,但他们正在使用ARC。 希望它能帮助你 有很多“图表”库: 查看 或者这个: 您的示例图片实际上非常容易使用。如果你不关心你的图表到底是什么样子的,我建议你看看它到底是什么。如果你需要图表与你所展示的一模一样(例如,因为它们看起来应该类似于web应用程序),我建议你自己绘制它们。绘制您所展示的简单图表并不难: 对文本使用UILabels 为液滴形状创建具有颜色的层 使用

我必须为iPad应用程序绘制下图所示的图表。有免费的本地图表api吗

或者有人帮忙画

任何帮助都是值得的。

并使用此功能,但他们正在使用ARC。 希望它能帮助你

有很多“图表”库:

查看

或者这个:


您的示例图片实际上非常容易使用。如果你不关心你的图表到底是什么样子的,我建议你看看它到底是什么。如果你需要图表与你所展示的一模一样(例如,因为它们看起来应该类似于web应用程序),我建议你自己绘制它们。绘制您所展示的简单图表并不难:

  • 对文本使用UILabels
  • 为液滴形状创建具有颜色的层
  • 使用每个图表的值移动和缩放图层。它们甚至可以通过几行代码平滑地设置动画
如果您想尝试并需要更多详细信息,请告诉我。

我愿意接受。 我不认为任何图书馆会做你的交易。你需要创造你自己的。以下是我的想法

对于一种图表,你可以了解车速表的工作原理。嗯,我并没有搜索那个链接,希望这个想法可以。您可以计算百分比的角度,并相应地绘制圆弧。这不会太难

对于液滴,oops将有点忙。但这里有一些逻辑:

我猜在你的水滴状图表中,每个部分都有百分比。 你可以为他们计算半径!希望下面的图片能更好地解释你的想法。 我只是想分享逻辑,而不是代码,因为这并不是说给我一些代码:)

希望这有帮助


我认为以上所有的都可能是使用透明图像来完成的,其底层形状会使用数学代码,从而增大尺寸/直径

使用Arc百分比,您可以获得拨号
(可用区域/100)*进度量

然后让图像旋转一定量,以使刻度盘就位,并从左到右以相同的量填充底层彩色正方形?这将节省大量绘图代码。

如果使用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);                
}
编辑1: 在代码中添加了更多注释,以便更好地理解


我有一个正在进行的项目

导致


我改变了拨片代码,使其面积代表百分比,而不是宽度。感觉更自然

-(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];
}


这些我都看过了。但不是为我的案子工作(无论如何,谢谢你的帮助。@Krumelur我不这么认为。不。ARC很好,…你甚至可以混合使用和不使用ARC的源代码。这是一个反问;)你可能对观看wwdc2011视频感兴趣。我需要一些关于SVG的澄清。你能为我的例子提供理解它的最佳链接吗?这似乎是java代码,
parseInt
@tinkerbeast你能详细说明一下吗。另外,如果你能画出你展示的方式,你能告诉SVG是如何涉及的吗?我很好奇SVG是一种描述矢量图像的XML格式。在我的示例中,我只是创建了一个Path元素(或者更简单)。代码实际上是JavaScript代码。我假设是一个网络解决方案。如果你要构建一个本机IOS应用程序,Quartz 2D是最好的解决方案。但是,默认情况下Quartz 2D不支持SVG。我没有使用过Quartz 2D,但是画这个东西并不难。我可以很容易地为你提供C(graphics.h)或Java(Java2d),它们做同样的事情。这给了你Objective-C中的实现。给他赏金:)。+1作为你在答案中的投入。然而,在这种特殊情况下,不需要太多的逻辑,因为UIBezierPath提供了一些方便的方法。看看我的答案。你能帮我画下一张图表吗?正如我所理解的,在这个线程中显示和链接的解决方案和项目涵盖了您所展示的所有示例。所以我不确定,我怎样才能帮助你。
#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];
}