使用CAShapeLayer與UIBezierPath畫動態柱狀圖
為了方便大家看的簡單明白,所以程式碼比較粗糙,也沒有封裝,應為需求開發網上找了好多UIBezierPath的資料都看的不是很明白,所以自己研究了半天寫出來給大家看看。</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="objc" style="color: rgb(75, 209, 87); font-size: 11px;">// // TextView.m // 練習 // // Created by 王文傑 on 16/9/20. // Copyright © 2016年 王文傑. All rights reserved. // #import "TextView.h" @implementation TextView // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { NSArray * Value = @[@"60",@"90",@"100",@"80",@"200",@"30"]; NSArray * month = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月"]; //獲取資料最大值 float max = [[Value valueForKeyPath:@"@max.intValue"] floatValue]; //計算座標比例 float value = 140/max; //迴圈建立柱狀圖 for (int i = 0; i<Value.count; i++) { /** * //獲得上下文 CGContextRef ctx=UIGraphicsGetCurrentContext(); //第二個引數是x軸,第三個是y軸/起點 CGContextMoveToPoint(ctx, 80+i*50, 200); //第二個引數是x軸,第三個是y軸/終點 CGContextAddLineToPoint(ctx, 80+i*50, self.bounds.size.height-[[cost objectAtIndex:i] floatValue]*value); //設定繪圖的顏色 CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0); //設定線條的寬度 CGContextSetLineWidth(ctx, 10); //設定線條的起點和終點的樣式 CGContextSetLineCap(ctx, kCGLineCapButt); //設定寬度 CGContextSetLineWidth(ctx, 20); //繪製一條空心的線 CGContextStrokePath(ctx); * * @return 第一種方法 */ UIBezierPath *Polyline = [UIBezierPath bezierPath]; //設定起點 [Polyline moveToPoint:CGPointMake(80+i*50, 200)]; //設定終點 [Polyline addLineToPoint:CGPointMake(80+i*50,self.bounds.size.height-[[Value objectAtIndex:i] floatValue]*value)]; //設定顏色 [[UIColor clearColor] set]; //設定寬度 Polyline.lineWidth = 20; //新增到畫布 [Polyline stroke]; //新增CAShapeLayer CAShapeLayer *shapeLine = [[CAShapeLayer alloc]init]; //設定顏色 shapeLine.strokeColor = [UIColor colorWithRed:0.400 green:1.000 blue:1.000 alpha:0.8].CGColor; //設定寬度 shapeLine.lineWidth = 20.0; //把CAShapeLayer新增到當前檢視CAShapeLayer [self.layer addSublayer:shapeLine]; //把Polyline的路徑賦予shapeLine shapeLine.path = Polyline.CGPath; //開始新增動畫 [CATransaction begin]; //建立一個strokeEnd路徑的動畫 CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; //動畫時間 pathAnimation.duration = 2.0; //新增動畫樣式 pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //動畫起點 pathAnimation.fromValue = @0.0f; //動畫停止位置 pathAnimation.toValue = @1.0f; //把動畫新增到CAShapeLayer [shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; //動畫終點 shapeLine.strokeEnd = 1.0; //結束動畫 [CATransaction commit]; //柱狀圖值 UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, self.bounds.size.height-20-[[Value objectAtIndex:i] floatValue]*value, 40, 20)]; label.text = [NSString stringWithFormat:@"%@",[Value objectAtIndex:i]]; label.textAlignment = NSTextAlignmentCenter; label.font = [UIFont systemFontOfSize:11]; [self addSubview:label]; //x軸座標 UILabel * label1 = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, 200, 40, 20)]; label1.text = [NSString stringWithFormat:@"%@",[month objectAtIndex:i]]; label1.textAlignment = NSTextAlignmentCenter; label1.font = [UIFont systemFontOfSize:15]; [self addSubview:label1]; } //畫x軸 for (int i = 0; i<15; i++) { UIBezierPath *Polyline = [UIBezierPath bezierPath]; //設定起點 [Polyline moveToPoint:CGPointMake(0, 200-i*10)]; //設定終點 [Polyline addLineToPoint:CGPointMake(self.bounds.size.width,200-i*10)]; //設定顏色 [[UIColor grayColor] set]; //設定寬度 Polyline.lineWidth = 0.3; //新增到畫布 [Polyline stroke]; } } @end
相關推薦
使用CAShapeLayer與UIBezierPath畫動態柱狀圖
</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="obj
d3.js(v5.7)完整地畫一個柱狀圖
img edi http 代碼 坐標 不能 畫布 分享 ueditor 一、首先定義畫布大小以及繪畫區域的位置(總不能頂著屏幕邊沿畫吧) 代碼: 圖示: 二、橫、縱向坐標軸 代碼: 圖示:
Echarts之動態柱狀圖
動態柱狀圖以及點選事件效果圖: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &
matlab程式碼畫條紋柱狀圖
bwidth = size(bits,2); bheight = size(bits,1); bsize = bwidth * bheight; if ~isempty(colorlist)colorlist = uint8(255*colorlist);[colors,colori] = nextnonbw
ASP.NET+JQuery+.Ashx實現+百度Echarts 實現動態柱狀圖資料圖形報表的統計
在目前的一個專案中,需要用到報表表現資料,這些資料有多個維度,需要同時表現出來,同時可能會有大量資料呈現的需求,經過幾輪挑選,最終選擇了百度的echarts作為報表基礎類庫。echarts功能強大,介面優美。要呈現的資料就用柱狀圖來顯示了,柱狀圖更直觀的顯示出客戶最想要的東
使用seaborn畫堆積柱狀圖
問題描述: 原始表part-00000.csv中列name 有兩組值,一組是rmb,另一組是cis,所以想要實現按照name中資料分組的堆積柱狀圖。 1. 原始資料樣式 下載連結:http:/
python動態柱狀圖圖表視覺化:歷年軟科中國大學排行
本來想參照:https://mp.weixin.qq.com/s/e7Wd7aEatcLFGgJUDkg-EQ搞一個往年程式語言動態圖的,奈何找不到資料,有資料來源的歡迎在評論區留言。 這裡找到了一個,是2020年6月的程式語言排行,供大家看一下:https://www.tiobe.com/tiobe-ind
ECharts動態加載堆疊柱狀圖的實例
pos list ntb tar value set push show val 一、引入echarts.js文件(下載頁:http://echarts.baidu.com/download.html) 二、HTML代碼: <div style="width: 10
Highcharts 動態制作3D柱狀圖
nbsp ret isp cab AD quest pla objects AR 學習參考菜鳥網站:http://www.runoob.com/highcharts/highcharts-tutorial.html 我是通過後端返回設備數據,進行前端出圖,效果如下: 代碼
Matlab 畫柱狀圖
Matlab 畫柱狀圖 errorlist=[std_dfg,std_dfgB,std_tli,std_tliB]; figure('Name','std of reconstruction error' ... ,'position',[100 200 1200 500]...
實現柱狀圖與條形圖的結合,MPAndroidChart的簡單使用
先貼效果圖: 這種樣式的統計表格也是比較常用的,下面直接貼程式碼: public class ChartActivity extends BaseActivity { @BindView(R.id.chart1) MyCombinedChart mChart1;//完成
springboot動態載入Echarts柱狀圖
第一次寫部落格,廢話不多說,直接上程式碼 後臺程式碼 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@Request
python 使用 matplotlib.pyplot來畫柱狀圖和餅圖
匯入包 import matplotlib.pyplot as plt 柱狀圖 最簡柱狀圖 # 顯示高度 def autolabel(rects): for rect in rects: height = rect.get_height() plt.text(r
vue專案中使用Echarts 動態更改圖表資料 , Vue 折線圖、柱狀圖等圖表動態重新整理 ,
問題:在vue元件中,用echarts外掛 動態獲取、修改圖表資料 解決:已解決! 第一步:開啟cmd命令視窗 安裝echarts依賴 安裝:npm install echarts -S 第二步:在main.js中全域性引入 //引入echarts的圖表外掛
柱狀圖多系列php動態實現(ec)
<?php require_once 'data.php'; $arr1=$a->sum('answer','ask_id=1'); $arr2=$a->sum('answer','ask_id=2'); $arr3=$a->sum('answer','ask_id=3');
【Echarts】簡單實現——第一個柱狀圖的實現(在後臺動態獲取資料)
第一次接觸這個東西,感覺還有點濛濛的。經過兩天的努力終於搞明白。下面我用自己的方式實現以下,方便大家理解。 下面是我使用一個簡單的mvc框架來實現這個demo。 效果圖: 步驟: 1、新建一個mvc框架的專案。 2、新建控制器:EchartsBa
用ECharts畫多柱子柱狀圖(可點選)
其實用ECharts畫柱子還是挺簡單的,多去官網看看官方文件,就理解了。 columLabel是多柱子的名字。columName 是橫座標。bgColorList 是柱子的顏色。arr 是每個柱子的值。list 是後臺傳過來的各個柱子的值,但是要經過處理賦值給arr ,賦值的方法也不只這一種
MATLAB中畫柱狀圖
論文中需要畫圖進行比較,感覺還是matlab畫起來比較方便,先把自己畫的圖及matlab程式碼放上。 y=[300 311;390 425; 312 321; 250 185; 550 535; 420 432; 410 520;]; b=bar(y); grid on; ch = get(b,
echarts 柱狀圖,折線圖互轉例項(資料動態請求後臺)
function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : {
Android 實現視覺化動態音訊柱狀圖
public class FFTActivity extends Activity implements OnClickListener{ private Button button; private ImageView imageView; private int frequency = 8000;