PNChart

1、項目須要實現圖表（折線圖）的功能，因爲IOS並無原生的控件能夠開發圖表，經在網絡上搜索決定使用PNChart第三方庫實現折線圖的功能，PNChart還能夠建立柱狀圖、餅圖、圓形進度條等圖表視圖，我就再也不一一的舉例實現相關的視圖。

（1）建立一個折線圖；

//折線圖
    self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 30, [UIScreen mainScreen].bounds.size.width, 200)];
    self.lineChart.legendStyle = PNLegendItemStyleStacked;
    self.lineChart.delegate = self;
    
    self.lineChart.showCoordinateAxis = YES; //顯示座標系
    self.lineChart.showGenYLabels = YES;
    self.lineChart.showLabel = YES;
    self.lineChart.thousandsSeparator = YES;
    
    
    [self.lineChart setXLabels:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];
    NSArray *data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2, @60.1, @160.1, @126.4, @262.2, @186.2, @60.1, @160.1];
    
    PNLineChartData *data01 = [PNLineChartData new]; //chart數據
    data01.dataTitle = @"Alpha";
    data01.color = PNFreshGreen; //折線的顏色
    data01.itemCount = self.lineChart.xLabels.count; //x軸座標item數
    data01.inflexionPointStyle = PNLineChartPointStyleCircle; //數值點的樣式
    
    data01.getData = ^(NSUInteger index) {
        
        CGFloat yValue = [data01Array[index] floatValue];
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    
    self.lineChart.chartData = @[data01];
    [self.lineChart strokeChart]; //畫折線，帶動畫
    
    
//PNChartDelegate委託的實現  
- (void)userClickedOnLinePoint:(CGPoint)point lineIndex:(NSInteger)lineIndex {
    
    NSLog(@"Click on line %f, %f, line index is %d",point.x, point.y, (int)lineIndex);
}


- (void)userClickedOnLineKeyPoint:(CGPoint)point lineIndex:(NSInteger)lineIndex pointIndex:(NSInteger)pointIndex {
    
    NSLog(@"Click Key on line %f, %f line index is %d and point index is %d",point.x, point.y,(int)lineIndex, (int)pointIndex);
    
    //在這個位置彈出邏輯
}

（2）更新折線圖的數據；

你能夠建立一個更新的按鈕或者是一些選項卡來更新lineChart的內容；

//更新折線的數據
- (void)updateView {
    
    NSArray *data01Array = @[@80.1, @180.1, @126.4, @292.2, @186.2, @80.1, @160.1, @126.4, @262.2, @186.2, @80.1, @160.1];
    
    PNLineChartData *data01 = [PNLineChartData new];
    data01.dataTitle = @"Alpha";
    data01.color = PNFreshGreen;
    data01.itemCount = self.lineChart.xLabels.count;
    data01.inflexionPointStyle = PNLineChartPointStyleCircle;
    
    data01.getData = ^(NSUInteger index) {
        
        CGFloat yValue = [data01Array[index] floatValue];
        return [PNLineChartDataItem dataItemWithY:yValue];
    };
    
    [self.lineChart updateChartData:@[data01]];
    [self.lineChart strokeChart];
}

折線圖效果：