Android(安卓)Canvas练习(4)自已绘折线图

弄完柱形图后，忽然发现，做折线图变得很容易了。马上就弄了张折线图和折线与柱形混合图出来。

效果图:

主要是利用了Android的Path，这个在这种情况下真很有用。

附上代码:

package com.xcl.canvas03;/** * Canvas练习  *   自已画饼图和柱形图，实现出来后觉得也算实用. *   折线图及折线与柱形的混合图 * author:xiongchuanliang * date:2014-4-6 */import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.content.res.Resources;import android.graphics.BlurMaskFilter;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.Typeface;import android.graphics.Path.Direction;import android.graphics.RectF;import android.util.DisplayMetrics;import android.view.Menu;import android.view.View;@SuppressLint("NewApi")public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//setContentView(R.layout.activity_main);//setContentView(new PanelRpt(this)); //饼图//setContentView(new PanelBar(this)); //柱形图setContentView(new PanelLnChart(this)); //折线图}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}class PanelLnChart extends View {private int ScrHeight;private int ScrWidth;private Paint[] arrPaintArc;private Paint PaintText = null;final int[] colors = new int[]{R.color.red,R.color.white,R.color.green,R.color.yellow,R.color.blue,};//饼图演示用的比例,实际使用中，即为外部传入的比例参数final float arrPer[] = new float[]{20f,30f,10f,40f};//柱形图演示用的比例,实际使用中，即为外部传入的比例参数private final int[] arrNum = {1,4,3,2};public PanelLnChart(Context context){super(context);//解决4.1版本 以下canvas.drawTextOnPath()不显示问题this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);//屏幕信息DisplayMetrics dm = getResources().getDisplayMetrics();ScrHeight = dm.heightPixels;ScrWidth = dm.widthPixels;//设置边缘特殊效果    BlurMaskFilter PaintBGBlur = new BlurMaskFilter(    1, BlurMaskFilter.Blur.INNER);arrPaintArc = new Paint[5];Resources res = this.getResources();for(int i=0;i<5;i++){arrPaintArc[i] = new Paint();arrPaintArc[i].setColor(res.getColor(colors[i] )); arrPaintArc[i].setStyle(Paint.Style.FILL);arrPaintArc[i].setStrokeWidth(4);arrPaintArc[i].setMaskFilter(PaintBGBlur);}PaintText = new Paint();PaintText.setColor(Color.BLUE);PaintText.setTextSize(30);PaintText.setTypeface(Typeface.DEFAULT_BOLD);}public void onDraw(Canvas canvas){//画布背景canvas.drawColor(Color.WHITE);//饼图标题canvas.drawText("自绘折线图", 100,50, PaintText);arrPaintArc[0].setTextSize(25);arrPaintArc[3].setTextSize(25);arrPaintArc[0].setStyle(Paint.Style.STROKE);int i= 0;int lnWidth = 10; //标识线宽度int lnSpace = 40; //标识间距int startx = 120;int endx = startx + 20;int starty =  ScrHeight / 3 ;int endy = ScrHeight / 3 ;int initX = startx;int initY = starty;int rectHeight = 10; //柱形框高度/////////////////////////    //折线图    ///////////////////////////// Y 轴  标识线和值int yCount = 5;for(i=0; i<yCount; i++) {starty =  initY - (i+1) * lnSpace;endy = starty;if(i == 0) continue;//画折线canvas.drawLine( initX  ,starty + lnSpace ,startx + yCount * lnSpace ,starty + lnSpace, PaintText);canvas.drawText(Integer.toString(i), initX - 30,endy + lnSpace, PaintText);}// Y 轴canvas.drawLine( startx ,starty ,initX ,initY, PaintText);//用于画折线Path p = new Path();p.moveTo(initX,initY);//X 轴  for(i=0; i< arrNum.length; i++) {     startx=  initX + (i+1) * lnSpace;endx = startx;canvas.drawLine( startx  ,initY ,startx ,endy, PaintText);//标识文字canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[0]);//画折线p.lineTo(startx ,initY  -  arrNum[i] * lnSpace);} canvas.drawLine( initX ,initY  ,ScrWidth - 10  ,initY, PaintText);//画折线 canvas.drawPath(p,arrPaintArc[0]);  ////////////////////////////////////////////////////////////////// /////////////////////////    //折线图与横向柱形图的混合    ///////////////////////////    startx = 120;// ScrWidth / 2 - 50;endx = startx + 20;starty = ScrHeight - ScrHeight / 3 ;endy = ScrHeight - ScrHeight / 3 ;initX = startx;initY = starty;// Y 轴  标识线和值for(i=0; i<5; i++) {starty =  initY - (i+1) * lnSpace;endy = starty;if(i == 0) continue;canvas.drawLine( startx - lnWidth  ,starty + lnSpace ,initX,endy + lnSpace, PaintText);canvas.drawText(Integer.toString(i), initX - 30,endy + lnSpace, PaintText);}// Y 轴canvas.drawLine( startx ,starty ,initX ,initY, PaintText);    //用于画折线Path p2 = new Path();p2.moveTo(initX,initY);//X 轴  for(i=0; i< arrNum.length; i++) {     startx=  initX + (i+1) * lnSpace;endx = startx;//柱形canvas.drawRect(startx - rectHeight  ,initY,startx + rectHeight  ,initY  -  arrNum[i] * lnSpace, arrPaintArc[3]);//标识文字canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[3]);//画折线p2.lineTo(startx  ,initY  -  arrNum[i] * lnSpace);// p2.lineTo(startx + rectHeight  + lnWidth ,initY  -  arrNum[i] * lnSpace);} canvas.drawLine( initX ,initY  ,ScrWidth - 10  ,initY, PaintText);//画折线 canvas.drawPath(p2,arrPaintArc[0]);///////////////////////////////  }}}

附其它绘制图表的链接:

Android Canvas练习(1)画一张报表来玩

Android Canvas练习(2)自已绘饼图

Android Canvas练习(3)自已绘柱形图

Android Canvas练习(5)自已绘面积图(Area Chart)

MAIL: xcl_168@aliyun.com

BLOG: http://blog.csdn.net/xcl168

更多相关文章

随机推荐