自定义折线图

最新推荐文章于 2023-10-22 08:31:49 发布

Mr.Hu

最新推荐文章于 2023-10-22 08:31:49 发布

阅读量651

点赞数 2

分类专栏：自定义

本文链接：https://blog.csdn.net/qq_29918347/article/details/51503021

版权

自定义专栏收录该内容

15 篇文章 0 订阅

订阅专栏

绘制折线，关键就是对坐标点的计算，计算出坐标剩下的就是调用方法去绘制了，下面贴上我写的静态的折线图，效果图如下：

代码：

import java.util.List;
import com.example.mytoolutils.R;
import com.example.mytoolutils.utils.DensityUtil;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Shader;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 *自定义折线图
 */
public class GraphView extends View{
    public GraphView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        initview();
    }
    public GraphView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        initview();
    }
    public GraphView(Context context) {
        super(context);
        this.context=context;
        initview();
    }
    /**绘制曲线区宽*/
    private int width;
    /**绘制曲线区高 */
    private int height;
    /**距离底部高度*/
    private int marginBottom=20;
    /**距离左边宽度*/
    private int marginleft=20;
    /**数据集合*/
    private static List<Float> data;
    /**Y轴最大值（上限）*/
    private int YMaxData;
    /**y轴平均增长值*/
    private int YAdd;
    /**数据点集合*/
    private Point[] allPoints;
    private Paint paint;
    private Context context;
    private Resources resources;
    /**直线绘制*/
    private static String DRAW_LINE_TYEP_STRAIGHT_LINT="GraphView_Draw_straight_line";
    /**曲线绘制*/
    private static String DRAW_LINE_TYEP_CURVE="GraphView_Draw_curve";
    /**绘制线条类型*/
    private String drawtype;
    @SuppressWarnings("static-access")
    private void initview() {
        paint=new DensityUtil().PaintinitSmooth();
        resources=context.getResources();
        drawtype=DRAW_LINE_TYEP_CURVE;
    }
    /**
     * 获取数据
     * @param data
     * @param YMaxData  Y轴最大值（上限）
     * @param YAdd y轴平均增长值
     */
    public void SetData(List<Float> data){
        this.data=data;
        invalidate();
    }
    public void Setmore(int YMaxData,int YAdd){
        this.YMaxData=YMaxData;
        this.YAdd=YAdd;
    }
    /**
     * 设置线条绘制类型
     * @param drawtype
     */
    public void SetLineType(String drawtype){
        this.drawtype=drawtype;
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        width=w-marginleft;
        height=h-marginBottom;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        if(YMaxData!=0&&YAdd!=0){
            paint.setColor(resources.getColor(R.color.gray_cc));
            drawXline(canvas);
            drawYline(canvas);
            if(data!=null&&data.size()!=0){
                allPoints=getPoint();
                paint.setColor(resources.getColor(R.color.red));
                paint.setStyle(Style.STROKE);
                if(drawtype.equals(DRAW_LINE_TYEP_STRAIGHT_LINT)){
                    drawBrokenline(canvas);
                }else if(drawtype.equals(DRAW_LINE_TYEP_CURVE)){
                    drawCurveline(canvas);
                }
                paint.setStyle(Style.FILL);
                drawCircle(canvas);
            }
        }
    }
    /**
     * 标记坐标点
     * @param canvas 
     */
    private void drawCircle(Canvas canvas) {
        for(int i=0;i<allPoints.length;i++){
            canvas.drawCircle(allPoints[i].x, allPoints[i].y, 5f, paint);
        }
    }
    /**
     * 获取所有数据点
     * @return
     */
    private Point[] getPoint() {
        Point []points=new Point[data.size()];
        for(int i=0;i<points.length;i++){
            int y=(int) (height-((data.get(i)/YMaxData)*height));
            int x=(width/data.size())*i+marginleft;
            points[i]=new Point(x, y);
        }
        return points;
    }
    /**
     * 曲线连接数据点
     * @param canvas
     */
    private void drawCurveline(Canvas canvas) {
        Path path=new Path();
        Point startp = new Point();
        Point endp = new Point();
        Point p3=new Point();
        Point p4=new Point();
/*      Shader mShader = new LinearGradient(0, 0, 0, getHeight(), new int[] {
                resources.getColor(R.color.blue),resources.getColor(R.color.black),resources.getColor(R.color.gray_cc)},
                null, Shader.TileMode.CLAMP);
        Paint maPaint=new Paint();
        maPaint.setShader(mShader);
        maPaint.setStyle(Style.STROKE);*/
        for(int i=0;i<allPoints.length-1;i++){
            startp=allPoints[i];
            endp=allPoints[i+1];
            int wt = (startp.x + endp.x) / 2;//中间点
            p3.y = startp.y;
            p3.x = wt;
            p4.y = endp.y;
            p4.x = wt;
            path.moveTo(startp.x, startp.y);
            path.cubicTo(p3.x, p3.y, p4.x, p4.y, endp.x, endp.y);//(x1,y1)(x2,y2)是控制点(x3,y3)是结束点
            canvas.drawPath(path, paint);
        }
    }
    /**
     * 直线连接数据点
     * @param canvas
     */
    private void drawBrokenline(Canvas canvas) {
        for(int i=0;i<allPoints.length-1;i++){
            canvas.drawLine(allPoints[i].x, allPoints[i].y, allPoints[i+1].x, allPoints[i+1].y, paint);
        }
    }
    /**
     * 绘制纵向 包含y轴
     * @param canvas
     */
    private void drawYline(Canvas canvas) {
        for(int i=0;i<data.size();i++){
            paint.setColor(resources.getColor(R.color.gray_cc));
            //绘制直线
            canvas.drawLine(marginleft+width/data.size()*i,0, marginleft+width/data.size()*i, height, paint);
            //绘制文字
            drawText(String.valueOf(i),canvas,marginleft+width/data.size()*i,height+marginBottom/2);
        }
    }
    private void drawText(String text,Canvas canvas,int x,int y) {
        paint.setColor(resources.getColor(R.color.red));
        canvas.drawText(text, x, y, paint);
    }
    /**
     * 绘制横向 包含x轴
     * @param canvas
     */
    private void drawXline(Canvas canvas) {
        int allxline=YMaxData/YAdd;
        for(int i=1;i<allxline+1;i++){
            paint.setColor(resources.getColor(R.color.gray_cc));
            canvas.drawLine(marginleft, height/allxline*i, width,height/allxline*i, paint);
            drawText(String.valueOf(YMaxData-i*YAdd), canvas, marginleft/2, height/allxline*i);
        }
    }
}

代码比较简单，也没用重写onMeasure，只是简单粗暴的把整个折线绘制出来，对文字上的处理也不够，文字可以先对要绘制的文字进行测量，计算出宽高，然后在对要显示的位置进行设置，下面贴上应用的activity：

import java.util.ArrayList;
import java.util.List;
import com.example.mytoolutils.R;
import com.example.mytoolutils.R.id;
import com.example.mytoolutils.R.layout;
import com.example.mytoolutils.view.GraphView;
import android.app.Activity;
import android.os.Bundle;

public class MyGraphActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_graph);
    }
    @Override
    protected void onResume() {
        super.onResume();
        final GraphView mygraphview=(GraphView) findViewById(R.id.mygraphview);
        mygraphview.Setmore(60,10);
        mygraphview.SetData(AddList());
    }
    private List<Float> AddList() {
        List<Float>data=new ArrayList<Float>();
        data.add(10.4f);
        data.add(20.34f);
        data.add(30.44f);
        data.add(20.64f);
        data.add(19.34f);
        data.add(40.34f);
        data.add(30.74f);
        data.add(50.14f);
        data.add(58.00f);
        data.add(29.34f);
        data.add(35.24f);
        data.add(15.54f);
        data.add(30.44f);
        data.add(30.64f);
        data.add(22.34f);
        data.add(26.38f);
        data.add(35.89f);
        data.add(57.00f);
        data.add(40.34f);
        data.add(21.54f);
        data.add(25.94f);
        data.add(45.34f);
        data.add(37.34f);
        data.add(38.74f);
        data.add(28.34f);
        data.add(37.24f);
        data.add(22.34f);
        data.add(41.24f);
        data.add(35.34f);
        data.add(29.94f);
        return data;
    }
}

R.layout.activity_my_graph:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.mytoolutils.activity.MyGraphActivity" >

    <com.example.mytoolutils.view.GraphView
        android:id="@+id/mygraphview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1" >
    </com.example.mytoolutils.view.GraphView>
</LinearLayout>