WZChartsViewWidget

  • Version: V 1.0.0
  • Language: the object – c
  • Making:Vien Cyan’s chart framework
  • directory
  • V 1.0.0 version of the content
  • Ii. V 1.0.0 version of the content
  • V version 1.0.0 already has features
  • V 1.0.0 other utility classes
  • V 1.0.0 ideas
  • Vi. V 1.0.0 to be optimized
  • V 1.0.0 Example
  • V version 1.0.0 Icon

V 1.0.0 version of the content

  • V Styles available in version 1.0.0

Chart type X, y coordinates animation color size other
Ring charts no Whether animation, time Ring and background color, gradable Number of rings, width of rings, distance between rings Whether there is a background ring
The line chart 1. Whether the upper X-axis is displayed, line width and line color; 2. Whether the lower X axis is displayed, line width and line color; 3. Whether Y axis is displayed, line width and line color; 4. X-axis coordinate height, coordinate color, coordinate font, coordinate selected color; 5. Select the color of Y-axis Whether animation, time Line and background color, can be gradient The line width Fold point button, a screen display number
Single/double bar chart Same as above Whether animation, time Background color, can be gradient Column width One screen shows number, transparency, column offset
Composite (see how you make your own) Same as above Same as above Same as above Same as above Same as above

Ii. V version 1.0.0 style function configuration

Chart type The configuration file note
Ring charts WZRingAnimParams If you use it once, it is convenient to change the thief inside the direct configuration file
The line chart WZLineViewParams Same as above
Single/double bar chart WZColumnViewParams Same as above
Composite (see how you make your own) How do you make your own Same as above

V version 1.0.0 already has features

Chart type function note
Ring charts Dynamically change the radian of the ring There is no
The line chart Button click event, get the fold point coordinates add something, right slide load Ah, so far data can only be added from right to left
Single/double bar chart Button click event, get vertex coordinates add something, right slide load Same as above
Composite (see how you make your own) How do you make your own Same as above

V 1.0.0 other utility classes

The name of the class function note
CALayer+ShadowRadius.h Add shadows and rounded corners Optimized off-screen rendering
UIFont+SystemFontName.h Change the system font globally There is no
UIResponder+Router.h Page delivery method It is simpler and more convenient than delegate when passing methods are not complex
UIImage+Gif.h Turn UIImage GIF There is no

V 1.0.0 ideas

  • Diagram class according to different design requirements, in fact, not very good reuse, so the idea is more important.

Figure 1. The ring

  • Make a ring with WZRingShapeLayer and then configure the requirements in WZRingChartsView.
@interface WZRingShapeLayer : CALayer /** Create a single ring @param frame position @Param cellWidth @Param colorArray Y color @param RADIUS @return CALayer
 */
- (instancetype)init:(CGRect)frame cellWidth:(float)cellWidth colorArray:(NSArray <UIColor *> *)colorArray radius:(float)radius;

/**
 环动画

 @param percent 环百分比
 @param animation 是否动画
 @param duration 动画时间
 */
- (void)wzRingShapeLayerRingChangeWithPercent:(double)percent animation:(BOOL)animation duration:(float)duration;

@end
Copy the code
@interface WZRingChartsView : UIView

- (instancetype)initWithFrame:(CGRect)frame animParams:(WZRingAnimParams *)animParams;

- (void)updateWZRingChartsViewWithPercentArray:(NSMutableArray<NSNumber *> *)percentArray;

@end
Copy the code

2. Broken line/bar/composite chart

  • WZChartsBaseBackView as the parent class, and then as a subclass in the respective diagram design according to requirements.
  • Subclass design is detailed in The chart frame of Vien Cyan.
@interface WZChartsBaseBackView: UIViewreadonly) CGFloat xAxisWidth; // Total width @property (readonly) CGFloat xAxisTotalWidth; // Graph shows height @property (readonly) CGFloat yAxisHeight; // graph shows the number of y axis @property (readonly) NSInteger yShowCount; // table y axis @property (readonly) NSInteger yTotalCount; // graph y position @property (readonly) CGFloat yStartWidth; // graph y spacing @property (readonly) CGFloat yEachWidth; @property (strong, nonatomic) UIScrollView *scrollView; @property (strong, nonatomic) NSMutableArray<CAShapeLayer *> *lineShapeLayerArray; @property (strong, nonatomic) CAShapeLayer *lastLineShapeLayer; @ Property (strong, nonatomic) NSMutableArray<CATextLayer *> *bottomTextLayerArray; catExtLayer@property (strong, nonatomic) CATextLayer *lastbottomTextLayer; / / create the Y axis of the count (default 0) showCount article (default 0) - (void) createGridYAxisLineWithCount: (NSInteger) count showCount showCount: (NSInteger)ifShow:(BOOL)ifShow lineWidth:(float)lineWidth lineColor:(UIColor *)lineColor; / / create the X axis (the default is no) - (void) createGridTopXAxisLineWithLineWidth: (float)lineWidth lineColor:(UIColor *)lineColor; / / create the X axis (the default is no) - (void) createGridBottomXAxisLineWithLineWidth: (float)lineWidth lineColor:(UIColor *)lineColor; / / create the X axis text height/text style - (void) createBottomTextViewWithHeight: (float)height textColor:(UIColor *)textColor textFont:(UIFont *)textFont; / / update the X axis of the text and line number - (void) updateBottomTextViewWithTextArray: (NSMutableArray textArray < > nsstrings * *) lineCount:(NSInteger)lineCount; @endCopy the code

Vi. V 1.0.0 to be optimized

  • Gradient effects are generated by masking and have off-screen rendering issues. There are many drawing methods in PS, but the feeling principle is still related to mask. Android paint can set gradient color directly, I wonder if the internal principle is related to mask. Get CGContextRef directly in drawRect, but dynamic will affect performance and may not work.
  • Multiple folds, only one so far, should be separated out.

V 1.0.0 Example

  • You can already customize a lot, see how you use
  • WZRingChartsViewController – circle diagram
  • WZLineViewController — Line chart
  • WZSingleColumnViewController – Single bar charts
  • WZDoubleColumnViewController – Double bar charts
  • WZGroupChartsViewController – composite figure

V version 1.0.0 Icon

  • You have to put the previous k-line diagram on it to live up to the icon