Charts 3.0框架绘制-柱形图表

regmail2 8年前
   <p>使用Charts框架可以实现柱形图、曲线图、圆型图等。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ab8cd88aa27d9d9093950883f113cfe.png"></p>    <p style="text-align:center">图表</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/665e90825495445aea194e9b712661dc.png"></p>    <p style="text-align:center">图表</p>    <p>画折线使用 LineChartView类,用法与barChartView类型。其他类图标可参考ChartsDemo里面的案例实现</p>    <h3>一、初始化</h3>    <p>柱形图使用Charts框架中的BarChartView类:</p>    <pre>  <code class="language-objectivec">_chartView = [[BarChartView alloc]init];      //设置代理      _chartView.delegate = self;//代理      [self.view addSubview:_chartView];</code></pre>    <h3>二、设置图表格式</h3>    <p>1.基本样式</p>    <pre>  <code class="language-objectivec">_chartView.descriptionText = @"";//右下角描述      _chartView.drawBarShadowEnabled = NO;//是否绘制阴影背景      _chartView.drawValueAboveBarEnabled = YES;//数值显示是否在条柱上面      _chartView.noDataText = NSLocalizedString(@"加载中...", nil);//没有数据时的显示      _chartView.rightAxis.enabled = NO;//不画右边坐标轴      _chartView.legend.enabled = NO;//不显示图例说明      _chartView.dragEnabled = NO;//不启用拖拽图表</code></pre>    <p>2.交互设置</p>    <pre>  <code class="language-objectivec">_chartView.doubleTapToZoomEnabled = NO;//双击是否缩放      _chartView.scaleXEnabled = NO;//X轴缩放      _chartView.scaleYEnabled = NO;//Y轴缩放      _chartView.pinchZoomEnabled = NO;//XY轴是否同时缩放</code></pre>    <p>3.X轴样式设置</p>    <pre>  <code class="language-objectivec">ChartXAxis *xAxis = _chartView.xAxis;      xAxis.labelPosition = XAxisLabelPositionBottom;//X轴的显示位置      xAxis.drawGridLinesEnabled = NO;//不绘制网格      xAxis.labelFont = [UIFont systemFontOfSize:10.0f];//x数值字体大小      xAxis.labelTextColor = [UIColor blackColor];//数值字体颜色      DateFormatter *valueFormatter = [[DateFormatter alloc] init];//坐标数值样式      xAxis.valueFormatter = valueFormatter;      xAxis.labelCount = 7;</code></pre>    <p>4.Y轴样式设置</p>    <pre>  <code class="language-objectivec">NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];//坐标数值样式      leftAxisFormatter.maximumFractionDigits = 1;//Y轴坐标最多为1位小数      ChartYAxis *leftAxis = _chartView.leftAxis;      leftAxis.drawZeroLineEnabled = YES;//从0开始绘画      leftAxis.axisMaximum = 60;//最大值      leftAxis.axisMinimum = 0;//最小值      leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];      leftAxis.labelFont = [UIFont systemFontOfSize:10.f];//字体大小      leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//坐标数值的位置      leftAxis.labelCount = 8;//数值分割个数      leftAxis.labelTextColor = [UIColor blackColor];//坐标数值字体颜色      leftAxis.spaceTop = 0.15;//最大值到顶部的范围比      leftAxis.drawGridLinesEnabled = YES;//是否绘制网格      leftAxis.axisLineWidth = 1;//Y轴线宽      leftAxis.axisLineColor = [UIColor blackColor];//Y轴颜色        ChartYAxis *right = _chartView.rightAxis;      right.drawLabelsEnabled = NO;//是否显示Y轴坐标      right.drawGridLinesEnabled = NO;//不绘制网格</code></pre>    <p>5.marker设置</p>    <p>点击条柱时的数据展示,ChartsDemo中包含BalloonMarker类</p>    <pre>  <code class="language-objectivec">BalloonMarker *marker = [[BalloonMarker alloc]                               initWithColor: [UIColor colorWithWhite:180/255. alpha:1.0]                               font: [UIFont systemFontOfSize:12.0]                               textColor: UIColor.whiteColor                               insets: UIEdgeInsetsMake(4.0, 4.0, 10.0, 4.0)];      marker.chartView = _chartView;      marker.minimumSize = CGSizeMake(40.f, 20.f);      _chartView.marker = marker;</code></pre>    <p>设置动画</p>    <pre>  <code class="language-objectivec">[_chartViewanimateWithYAxisDuration:1.0f];</code></pre>    <p>ChartLimitLine类即可添加限制线,使用可参考ChartsDemo</p>    <h3>三、data设置</h3>    <pre>  <code class="language-objectivec">- (void)setDataCount:(int)count {        NSMutableArray *yVals = [[NSMutableArray alloc] init];      for (int i = 0; i < count; i++) {          int val = (double) (arc4random_uniform(60))+2;          [yVals addObject:[[BarChartDataEntry alloc] initWithX:i y:val]];      }        BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"DataSet"];      [set1 setColor:[UIColor grayColor]];//bar的颜色      [set1 setValueTextColor: [UIColor lightGrayColor]];  //    [set1 setDrawValuesEnabled:NO];//是否在bar上显示数值  //    [set1 setHighlightEnabled:NO];//是否点击有高亮效果,为NO是不会显示marker的效果        NSMutableArray *dataSets = [[NSMutableArray alloc] init];      [dataSets addObject:set1];      BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];      [data setValueFont:[UIFont systemFontOfSize:10]];      self.chartView.data = data;      [self.chartView notifyDataSetChanged];    }</code></pre>    <h3>四、实现barChartView的代理方法</h3>    <p>1.点击选中时的代理</p>    <pre>  <code class="language-objectivec">- (void)chartValueSelected:(ChartViewBase * __nonnull)chartView entry:(ChartDataEntry * __nonnull)entry highlight:(ChartHighlight * __nonnull)highlight{      NSLog(@"chartValueSelected");  }</code></pre>    <p>2.没有选中时的代理</p>    <pre>  <code class="language-objectivec">- (void)chartValueNothingSelected:(ChartViewBase * __nonnull)chartView{      NSLog(@"chartValueNothingSelected");  }</code></pre>    <p>3.捏合放大或缩小</p>    <pre>  <code class="language-objectivec">- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {      NSLog(@"---chartScaled---scaleX:%g, scaleY:%g", scaleX, scaleY);  }</code></pre>    <p>4.拖拽图表时的代理方法</p>    <pre>  <code class="language-objectivec">- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY {      NSLog(@"---chartTranslated---dX:%g, dY:%g", dX, dY);  }</code></pre>    <p>效果:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/be443218281627481dfc4a110ae47138.png"></p>    <p style="text-align:center">效果图</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/e60acab520b4</p>    <p> </p>