2011-03-09 10 views
6

En la aplicación para iPhone Roambi, el gráfico circular que se muestra se puede animar para rotar con el usuario como si girara un disco. Podemos sostener y hacer muchas cosas con eso.¿Cómo animar los gráficos circulares desarrollados utilizando la biblioteca de trama central?

Alguien mencionó que la aplicación Roambi se desarrolló utilizando librería base de parcela:

What library use Roambi app iPhone to draw chart?

¿Cómo puedo manipular un gráfico circular desarrollado utilizando parcela Core?

+0

Si solo está haciendo gráficos circulares, es posible que desee comprobar XYPieChart. Tiene animación y se ve mejor (en mi opinión) que CorePlot. –

Respuesta

6

Una mirada rápida en el código fuente Terreno Core revela que la herencia CPPieChart 's se ve así:

CPPieChart: CPPlot: CPAnnotationHostLayer: CPLayer: CALayer

Así se puede ver que, en el final, CPPieChart es solo una subclase CALayer. Puede que sea completamente incorrecto aquí, pero no hay nada que indique que no se pueda animar como cualquier otro CALayer. Pruebe el siguiente código para girar la capa de 360 ​​grados:

CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"]; 
CATransform3D transform = CATransform3DMakeRotation(DegreesToRadians(360), 0, 0, 1); 
rotation.toValue = [NSValue valueWithCATransform3D:transform]; 
rotation.duration = 10.0f; 
[pieChart addAnimation:rotation forKey:@"rotation"]; 

Si usted puede conseguir este trabajo, entonces es sólo una cuestión de la lectura de los valores del acelerómetro y su conversión a ángulos de rotación.

5

Para un gráfico de sectores simple, incluso con las animaciones antes mencionadas, Core Plot no es necesario. Si solo quiere una solución Core Plot, ignore esta respuesta. Sin embargo, aquí hay una solución simple que no requiere paquetes externos o incluso marcos.

Crea una UIView llamada PieChartView. En PieChartView.h:

#import <UIKit/UIKit.h> 

@interface PieChartView : UIView { 
    float zeroAngle; 
    NSMutableArray *valueArray; 
    NSMutableArray *colorArray; 
} 
@property (nonatomic) float zeroAngle; 
@property (nonatomic, retain) NSMutableArray *valueArray; 
@property (nonatomic, retain) NSMutableArray *colorArray; 
@end 

A continuación, la aplicación de PieChartView.m:

#import "PieChartView.h" 

@implementation PieChartView 
@synthesize zeroAngle; 
@synthesize valueArray, colorArray; 

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


- (void)drawRect:(CGRect)rect { 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    // DETERMINE NUMBER OF WEDGES OF PIE 
    int wedges = [valueArray count]; 
    if (wedges > [colorArray count]) { 
     NSLog(@"INSUFFICENT COLORS FOR PIE CHART: Please add %d additional colors.",wedges-[colorArray count]); 
     for (int i=[colorArray count] ; i<wedges ; ++i) { 
      [colorArray addObject:[UIColor whiteColor]]; 
     } 
    } 

    // DETERMINE TOTAL VOLUME OF PIE 
    float sum = 0.0; 
    for (int i=0; i<wedges ; ++i) { 
     sum += [[valueArray objectAtIndex:i] floatValue]; 
    } 
    float frac = 2.0*M_PI/sum; 

    // DETERMINE CENTER AND MAXIMUM RADIUS OF INSCRIBED CIRCLE 
    int center_x = rect.size.width/2.0; 
    int center_y = rect.size.height/2.0; 
    int radius = (center_x > center_y ? center_x : center_y); 

    // DRAW WEDGES CLOCKWISE FROM POSITIVE X-AXIS 
    float startAngle=zeroAngle; 
    float endAngle=zeroAngle; 
    for (int i=0; i<wedges; ++i) { 
     startAngle = endAngle; 
     endAngle += [[valueArray objectAtIndex:i] floatValue]*frac; 
     [[colorArray objectAtIndex:i] setFill]; 
     CGContextMoveToPoint(context, center_x, center_y); 
     CGContextAddArc(context, center_x, center_y, radius, startAngle, endAngle, 0); 
     CGContextClosePath(context); 
     CGContextFillPath(context); 
    } 
} 

- (void)dealloc { 
    [valueArray release]; 
    [colorArray release]; 
    [super dealloc]; 
} 
@end 

Ahora se puede unir el flotador zeroAngle al acelerómetro en la forma que se desea lograr la animación deseada.

3

No sabía CorePlot, y podría ser de alguna utilidad para mí en un futuro próximo, así que simplemente lo eché un vistazo. CorePlot es interesante y es activo.

En cuanto a animaciones con CorePlot:

  1. documentación CorePlot menciona un Animation system, pero aún no está implementado ...
  2. Incluso si se basa en Core Animation, que no significa que el gráfico CorePlot será fácilmente animatable .

Interesting reading on the topic on google groups.

Así que aquí están sus opciones (por mi orden de preferencia):

  1. buscar otra manipulación de animaciones como Roambi hace biblioteca de trazado.
  2. implementar sus animaciones basadas en CorePlot (significa una buena comprensión de este marco y Core Animation)
  3. hacer todo usted mismo, dependiendo de lo que quiere, de nuevo, podría ser no es tan difícil ... Pero Core Animation habilidades necesarias, de nuevo.

dudo Roambi utiliza CorePlot, pero si lo hacen, que lo utilizan como una base con TONELADAS la costumbre en el código de casa ...

+0

@PengOne gracias por editar mi mala gramática, el inglés obviamente no es mi idioma principal;) –

Cuestiones relacionadas