WYChart 0.3.1

WYChart 0.3.1

×

测试已测试✗
语言语言 Obj-CObjective C
许可证 MIT
发布最后发布2017年2月

由GeorgeWang维护。

WYChart 0.3.1

  • 由
  • FreedomKing

一个简单优雅的LineChart和pieChart库，动画丰富。不久后将有更多类型的图表。

WYLineChart

让创建折线图变得简单，可滚动，可捏缩，可动化

WYPieChart

让创建饼图变得简单，可旋转，可拖动，可选择，可动化

WYRadarChart

让创建雷达图变得简单，可动化

经过一段时间，WYChart版本0.2.0已发布，它支持折线图中多条线。

如果你喜欢WYChart，用一颗星鼓励我🌟，谢谢！

如果你喜欢WYChart，给我一个星星🌟作为奖励，谢谢！

另外，关于WYChart技术及其它介绍的文章已开始撰写并逐步发布，👉点击这里，希望你能提出宝贵的意见。🍻🍻

中文简介请点击👉 中文简介

项目

要求

WYChart适用于iOS7+，兼容ARC。需要一些框架，如下

  • Foundation.framework
  • UIKit.framework
  • QuartzCore.framework
  • CoreGraphic.framework

上述框架通常包含在大多数Xcode项目中。

许可证

WYChart在MIT许可证下可用。有关更多信息，请参阅LICENSE文件。

示例

项目包含一个示例，演示了两个图表以及如何使用属性和方法来使用图表的代码。特别是，有两个图表的设置页面，您可以更改属性并查看发生了什么变化。为了运行示例项目，首先从Example目录中克隆存储库，然后从示例目录中运行pod install。示例页面显示以下内容

主表

饼图设置页面

折线图设置页面

入门

安装

WYChart可通过CocoaPods获得。要安装它，请简单地将其添加到您的Podfile中以下行

pod "WYChart"

添加文件夹

只需将WYChart文件夹拖放到您的下载项目中，然后拖放到您的项目中。

设置

WYChart设计了类似于UIKit框架中大多数控件（如UITableView、UICollection）的接口，您需要实现所需的代理和数据源方法，并设置一些基本属性。

首先

将以下行添加到您使用图表的.h或.m文件中

#import "WYLineChart.h"

或者

#import "WYPieChart.h"

以下行将向您展示如何以不同方式初始化WYLineChart和WYPieChart。

WYLineChart

首先，将以下行添加到遵循WYLineChartViewDelegate和WYLineChartViewDataSource的行中

    @interface SomeViewController () <WYLineChartViewDelegate, WYLineChartViewDatasource>

其次，为WYLineChartView初始化实例

    _chartView = [[WYLineChartView alloc] initWithFrame:frame];
    _chartView.delegate = self;
    _chartView.datasource = self;

第三，设置线图表数据数组，包含多个WYLineChartPoint

     NSMutableArray *mutableArray = [NSMutableArray array];
     // line_1
    NSArray *points = [WYLineChartPoint pointsFromValueArray:@[@(70706.89),@(75623.4),@(90980.f),@(80890.34),@(60321.2)]];
    [mutableArray addObject:points];
    // line_2
    points = [WYLineChartPoint pointsFromValueArray:@[@(50503.134),@(50446.85),@(50555.67),@(60216.48),@(50664.45),@(80890.34),@(30321.2)]];
    [mutableArray addObject:points];
     // set data
    _lineChart.points = mutableArray;

在v0.2.0之后，lineChart.points包含多行点，因此数据结构发生了变化，具体请参看头文件WYLineChartView.h

    // all the points of lines on the graph
    // the content should be:
    // /* points */@[
    //                  /* line 0 */ @[
    //                                 /* point 0 */ (WYLineChartPoint *)point0, point1, point2 ...
    //                                 ],
    //                  /* line 1 */ @[
    //                                 /* point 0 */ (WYLineChartPoint *)point0, point1, point2 ...
    //                                 ],
    //              ]
    // v0.2.0

最后，将图表添加到控制器的视图中并更新线图表

    [self.view addSubview:_chartView];  
    [_chartView updateGraph];

除此之外，您还需要实现所需的代理和数据源方法

代理 

    - (CGFloat)gapBetweenPointsHorizontalInLineChartView:(WYLineChartView *)chartView;

数据源 

    - (NSString *)lineChartView:(WYLineChartView *)chartView contentTextForXAxisLabelAtIndex:(NSInteger)index

    - (WYLineChartPoint *)lineChartView:(WYLineChartView *)chartView pointReferToXAxisLabelAtIndex:(NSInteger)index

上述工作还不够，还有很多可选属性可以配置线图表的外观和交互。顺便说一下，从v0.2.0开始，我们使用字典（键值对）通过数据源方法-(NSDictionary *)lineChartView:(WYLineChartView *)chartView attributesForLineAtIndex:(NSUInteger)index;配置线的属性，因此，如果需要配置某个属性，比如线条样式，您必须实现上面的数据源方法。

渐变前景 渐变前景是一个可选的线条属性，您应该使用数据源方法中的kWYLineChartLineAttributeDrawGradient键。为了让线表格看起来更优雅，您可以选择为它添加渐变前景，添加以下行

- (NSDictionary *)lineChartView:(WYLineChartView *)chartView attributesForLineAtIndex:(NSUInteger)index {
NSMutableDictionary *resultAttributes = [NSMutableDictionary dictionary];
resultAttributes[kWYLineChartLineAttributeDrawGradient] = @YES;

...
// other line attributes config
...

return resultAttributes;

}

在v0.2.0之后，无需设置渐变颜色，因为它与线条颜色一致，所以我们只需要决定是否显示渐变。

以下是这样显示渐变前景的示例

渐变前景

否则

没有渐变前景

可滚动的

WYLineChart支持您水平滚动图表，只需添加以下简单行

    _chartView.scrollable = YES;

然后，您可以滚动图表

滚动图表

可捏合的

您也可以添加以下行

    _chartView.pinchable = YES;

来使图表可捏合，当您想调整图表的数据范围时很有用，您可以向外或向内捏合来重新加载数据，而在- (void)lineChartView:didEndedPinchGraphWithOption:方法中会收到通知，在这些通知中，您可以重新设置数据数组和更新图表。

线条样式

线条样式是可选的线条属性，您应该使用数据源方法中的kWYLineChartLineAttributeLineStyle键。WYLineChart支持三种线条样式

    kWYLineChartMainStraightLine,
    kWYLineChartMainBezierWaveLine,
    kWYLineChartMainBezierTaperLine

如果不想画线而只显示点，可以选择数据源方法中的kWYLineChartMainNoneLine作为kWYLineChartLineAttributeLineStyle键。

波浪样式

直线样式

短划线样式

波浪、直线、短划线样式

没有线条

动画样式

动画不是线条属性，它是线图表属性，一旦设置，则所有线条都一致。图表有几种动画

    kWYLineChartAnimationDrawing,
    kWYLineChartAnimationAlpha,
    kWYLineChartAnimationWidth,
    kWYLineChartAnimationRise,
    kWYLineChartAnimationSpring,
    kWYLineChartNoneAnimation

例如，kWYLineChartAnimationDrawing表示为

绘制动画

和kWYLineChartAnimationSpring表示为

弹簧动画

接头样式

接头样式是可选的线条属性，您应该使用数据源方法中的kWYLineChartLineAttributeJunctionStyle键。您可以以下面所述的方式选择接头样式

    kWYLineChartJunctionShapeNone,
    kWYLineChartJunctionShapeSolidCircle,
    kWYLineChartJunctionShapeHollowCircle,
    kWYLineChartJunctionShapeSolidSquare,
    kWYLineChartJunctionShapeHollowSquare,
    kWYLineChartJunctionShapeSolidRectangle,
    kWYLineChartJunctionShapeHollowRectangle,
    kWYLineChartJunctionShapeSolidStar,
    kWYLineChartJunctionShapeHollowStar

例如，kWYLineChartJunctionShapeHollowRectangle将表示为

空心矩形

触摸点/线

WYLineChart包含一个长按手势，用于在触摸线上显示您触摸的位置，并通过以下代理方法返回点

    - (void)lineChartView:didBeganTouchAtSegmentOfPoint:value:
    - (void)lineChartView:didMovedTouchToSegmentOfPoint:value:
    - (void)lineChartView:didEndedTouchToSegmentOfPoint:value:

触摸点

但是，从v0.2.0开始，这个属性仅在lineChartView中只有一行时才有效。

点的标签

从v0.2.0版本开始，它支持您自定义标签以显示在点附近的附近。只需实现dataSource方法- (NSString *)lineChartView:(WYLineChartView *)chartView contextTextForPointAtIndexPath:(NSIndexPath *)indexPath，如果您返回nil，则indexPath处的标签将不会显示。

WYLineChart中有很多特性，如果您对此感兴趣，请参阅接口和定义文件。

WYPieChart

首先，按顺序遵循WYPieChartViewDelegate和WYPieChartViewDataSource

    @interface SomeViewController () <WYLineChartViewDelegate, WYLineChartViewDatasource>

其次，初始化WYPieChartView实例

    _pieView = [[WYPieChartView alloc] initWithFrame:CGRectMake(0, 70, self.view.wy_boundsWidth, 300)];
    _pieView.delegate = self;
    _pieView.datasource = self;

第三，设置包含多个扇区值的饼图数据数组

    _pieView.values = @[@50, @200, @40, @300, @100];

最后，将图表添加到控制器的视图并更新饼图

    [self.view addSubview:_pieView]; 
    [_pieView update];

除此之外，dataSource方法- (UIColor *)pieChartView:sectorColorAtIndex:需要扇区颜色，您必须实现该方法以着色您的饼图。

与WYLineChart类似，还有很多可选属性可供您配置线形图的外观和交互。

饼图样式

您可以在kWYPieChartNormalStyle和kWYPieChartGearStyle之间选择样式，如下所示

普通饼图样式

齿轮饼图样式

在初始化饼图时添加以下行

    _pieView.style = kWYPieChartNormalStyle/kWYPieChartGearStyle;

可旋转

如果您想让饼图更具交互性，可以添加以下代码

     _pieView.rotatable = YES;

使其可旋转。

饼图可旋转

选择

WYPieChart支持您选择扇区，并且有2种类型的动画，选择时将回调到代理方法pieChartView:didSelectedSectorAtIndex:，您可以选择选择类型，如下所示kWYPieChartSectorSelectedExtraction和kWYPieChartSectorSelectedPull

    _pieView.selectedStyle = kWYPieChartSectorSelectedExtraction;

提取样式

拉动样式

动画样式

有6种动画样式可以选择，在重新加载饼图时进行动画处理

kWYPieChartAnimationOrderlySpreading,
kWYPieChartAnimationAllSpreading,
kWYPieChartAnimationStretching,
kWYPieChartAnimationAlpha,
kWYPieChartAnimationScale

例如，kWYPieChartAnimationAllSpreading样式如下所示

均匀展开样式

您可以选择其他动画样式来查看演示中的效果。

内圆

属性showInnerCircle定义是否应在图表中绘制空心圆，您可以在上面添加标签，例如总和标签。

内圆

渐变

默认情况下，fillByGradient属性为NO，如果您将其设置为YES，则每个扇区都将使用渐变填充。

渐变填充

一些其他功能也包括在WYPieChart中，您可以在PieChartView.h中找到它们

WYRadarChart

首先，创建一个符合协议WYRadarChartViewDataSource的类

@interface SomeClass <WYRadarChartViewDataSource>

其次，构建一个WYRadarChartDimension数组，它描述了WYRadarChartView的顶点

self.dimensions = [NSMutableArray new];
for (NSInteger index = 0; index < self.dimensionCount; index++) {
    WYRadarChartDimension *dimension = [WYRadarChartDimension new];
    dimension.title = @"title";
    dimension.titleColor = [UIColor whiteColor];
    [self.dimensions addObject:dimension];
}

第三，使用维度数组和dataSource创建WYRadarChartView

self.radarChartView = [[WYRadarChartView alloc] initWithFrame:CGRectMake(0, 0, 100,100)
                                                   dimensions:self.dimensions
                                                     gradient:1];
self.radarChartView.dataSource = self;

最后，您可以更改WYRadarChartView的UI，如gradient（确定圆的数量，至少为1）、lineWidth、lineColor。然后用reloadData或reloadDataWithAnimation:duration:重新加载

维度

雷达图视图必须使用维度数组创建。

维度

项目

从数据源获取项目数据并配置WYRadarChartItem的UI样式

self.items = [NSMutableArray new];
for (NSInteger index = 0; index < self.itemCount; index++) {
    WYRadarChartItem *item = [WYRadarChartItem new];
    NSMutableArray *value = [NSMutableArray new];
    for (NSInteger i = 0; i < self.dimensionCount; i++) {
        [value addObject:@(arc4random_uniform(100)*0.01)];
    }
    item.value = value;
    item.borderColor = [UIColor wy_colorWithHex:0xffffff];
    item.fillColor = [UIColor wy_colorWithHex:arc4random_uniform(0xffffff) alpha:0.5];
    item.junctionShape = kWYLineChartJunctionShapeSolidCircle;
    [self.items addObject:item];
}

#pragma mark - WYRadarChartViewDataSource

- (NSUInteger)numberOfItemInRadarChartView:(WYRadarChartView *)radarChartView {
    return self.items.count;
}

- (WYRadarChartItem *)radarChartView:(WYRadarChartView *)radarChartView itemAtIndex:(NSUInteger)index {
    return self.items[index];
}

- (id<WYRadarChartViewItemDescription>)radarChartView:(WYRadarChartView *)radarChartView descriptionForItemAtIndex:(NSUInteger)index {
    return nil;
}

项目

渐变

self.radarChartView.gradient = self.gradient;
[self.radarChartView reloadDataWithAnimation:self.animation duration:kAnimationDuration];

渐变

动画

以动画和动画持续时间重新加载

typedef NS_ENUM(NSUInteger, WYRadarChartViewAnimation) {
    WYRadarChartViewAnimationNone,
    WYRadarChartViewAnimationScale,
    WYRadarChartViewAnimationScaleSpring,
    WYRadarChartViewAnimationStrokePath
};

[self.radarChartView reloadDataWithAnimation:self.animation duration:kAnimationDuration];

均匀展开样式

接头样式

您可以使用与WYLineChart的接头样式相同的样式配置WYRadarChartItem的junctionShape属性

/*
 *  default is kWYLineChartJunctionShapeNone
 */
@property (nonatomic, assign) WYLineChartJunctionShapeStyle junctionShape;

功能

v0.3.0

  • 包括雷达图。
  • 雷达图支持多维度和多项目。
  • 雷达图包含各种动画，如缩放和描边等。

v0.2.0

  • 支持折线图中的多条线。
  • 支持在每个点附近显示自定义文本的标签。
  • 使用字典（键值对）来设置线的属性，而不是属性值。

v0.1.2

  • 修复漏洞：WYPieChartView更改值和更新崩溃。

v0.1.1

  • 修复漏洞：WYLineChartView，X轴标签的数量不能与点的数量相同。

v0.1.0（首次发布）

  • 包括折线图（单线）和饼图。
  • 折线图包括各种动画，如绘制和弹簧等，如上述介绍。
  • 包括各种线条样式，如贝塞尔波浪线、贝塞尔轻触线和直线。
  • 饼图包括两种饼图样式：常规圆形和齿轮。
  • 饼图包括各种动画，如弹簧和缩放等，如上述介绍。
  • 饼图包括两种交互：旋转和拖动。

联系

如果您有任何问题或有了想法，您可以很高兴通过一个#issue与我分享，或者通过以下[email protected]电子邮件，或者在我个人博客上找到有关WYChart或其他主题的一些技术内容。