Android之折线图

一种实现

• View：

public class ZheXianView extends View {
    private Paint XPaint;
    private Paint YPaint;
    private Paint pointPaint;
    private Paint circlePaint;
    private Paint shapePaint;
    private Paint effectPaint, effectPaint1;
    private float yandianx, yuandiany, height, wigth;
    private Context context;
    private String ysplit[];
    private String unit;
    private float max;
    private int textSize = 10;
    private int margin = 20;
    private float gao;
    private boolean start = false;
    private Map<String, Float> mapx;

    public ZheXianView(Context context) {
        super(context);
        this.context = context;
    }


    public ZheXianView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    public ZheXianView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;

    }
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public ZheXianView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        this.context = context;
    }


    /**
     * sp转换成px
     */
    private int sp2px(float spValue) {
        float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }


    /**
     * dp转换成px
     */
    private int dp2px(float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }



    private void initView(){

        //连线
        XPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        XPaint.setAntiAlias(true);
        XPaint.setColor(Color.parseColor("#1E90FF"));//蓝色
        XPaint.setStrokeWidth(dp2px(1));

        //坐标轴
        YPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        YPaint.setAntiAlias(true);
        YPaint.setColor(Color.BLACK);
        YPaint.setStrokeWidth(dp2px(1));

        //点的外圈
        pointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        pointPaint.setAntiAlias(true);
        pointPaint.setColor(Color.parseColor("#1E90FF"));
        pointPaint.setStyle(Paint.Style.STROKE);
        pointPaint.setStrokeWidth(dp2px((float) 0.5));

        //圆圈
        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(Color.WHITE);
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setStrokeWidth(1);

        //网格线
        shapePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        shapePaint.setAntiAlias(true);
        shapePaint.setColor(Color.parseColor("#00008080"));
        shapePaint.setStyle(Paint.Style.FILL);
        shapePaint.setStrokeWidth(1);

        //x 和 y轴的文字
        effectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        effectPaint.setAntiAlias(true);
        effectPaint.setColor(Color.parseColor("#696969"));//粉红（有点像Y轴坐标）
        effectPaint.setStyle(Paint.Style.FILL);
        effectPaint.setStrokeWidth(1);
        effectPaint.setTextSize(sp2px(textSize));

        //点上的数据
        effectPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        effectPaint1.setAntiAlias(true);
        effectPaint1.setColor(Color.parseColor("#696969"));
        effectPaint1.setStyle(Paint.Style.FILL);
        effectPaint1.setStrokeWidth(1);
        effectPaint1.setTextSize(sp2px(textSize / 2));
    }

    @Override
    protected void onDraw(Canvas canvas){
        if (start) {
            yandianx = dp2px(margin);
            yuandiany = getMeasuredHeight() - dp2px(margin);
            wigth = getMeasuredWidth() - dp2px(margin * 2);
            height = getMeasuredHeight() - dp2px(margin * 2);
            float point[] = new float[]{yandianx, yuandiany, yandianx, yandianx, yandianx - dp2px(3), yandianx + dp2px(textSize / 2)};
            canvas.drawLines(point, 0, 4, YPaint);
            canvas.drawLines(point, 2, 4, YPaint);
            canvas.drawLine(yandianx, yandianx, yandianx + dp2px(3), yandianx + dp2px(textSize / 2), YPaint);
            canvas.drawLine(yandianx, yuandiany, yandianx + wigth, yuandiany, YPaint);
            canvas.drawLine(yandianx + wigth, yuandiany, yandianx + wigth - dp2px(textSize / 2), yuandiany - dp2px(3), YPaint);
            canvas.drawLine(yandianx + wigth, yuandiany, yandianx + wigth - dp2px(textSize / 2), yuandiany + dp2px(3), YPaint);
            canvas.drawText("0", yandianx - sp2px(textSize) - dp2px(2), yuandiany + sp2px(textSize) + dp2px(2), effectPaint);
            if (null != unit) {
                canvas.drawText(unit, yandianx - sp2px(textSize) * unit.length() / 2, yuandiany - height - dp2px(3), effectPaint);
            }
            if (null != ysplit && ysplit.length > 0) {
                gao = height / (ysplit.length + 1);
                for (int i = 0; i < ysplit.length; i++) {
                    float a = Float.parseFloat(ysplit[i]);
                    if (max < a) {
                        max = a;
                    }
                    canvas.drawLine(yandianx, yuandiany - (i + 1) * gao, yandianx + dp2px(3), yuandiany - (i + 1) * gao, YPaint);
                    canvas.drawText(ysplit[i], yandianx - (sp2px(textSize) * (ysplit[i].length())), yuandiany - (i + 1) * gao + sp2px(textSize / 2), effectPaint);
                }
            }
            if (mapx.size() > 0) {
                float kuan = wigth / (mapx.size() + 1);
                Object o[] = mapx.keySet().toArray();
                for (int i = 0; i < o.length; i++) {
                    String s = o[i].toString();
                    float x = yandianx + (i + 1) * kuan;
                    float y = yuandiany - (height - gao) / max * mapx.get(o[i]);
                    canvas.drawLine(x, yuandiany, x, yuandiany - dp2px(3), YPaint);
                    canvas.drawText(s, x - (sp2px(textSize) * (s.length() / 2)), yuandiany + sp2px(textSize) + dp2px(3), effectPaint);
                    if (i > 0) {
                        canvas.drawLine(yandianx + i * kuan, yuandiany - (height - gao) / max * mapx.get(o[i - 1]), x, y, XPaint);
                    }
                    int size = dp2px(3);
                    for (int i1 = 0; i1 < (x - yandianx) / size; i1++) {
                        if (i1 % 2 == 0)
                            canvas.drawLine(i1 * size + yandianx, y, (i1 + 1) * size + yandianx, y, shapePaint);
                    }
                    for (int i1 = 0; i1 < (yuandiany - y) / size; i1++) {
                        if (i1 % 2 == 0)
                            canvas.drawLine(x, yuandiany - i1 * size, x, yuandiany - (i1 + 1) * size, shapePaint);
                    }

                    String text = mapx.get(o[i]).toString();
                    canvas.drawText(text, x - text.length() * sp2px(textSize / 4), y - dp2px(3), effectPaint1);
                }
                for (int i=0;i<o.length;i++){
                    float x = yandianx + (i + 1) * kuan;
                    float y = yuandiany - (height - gao) / max * mapx.get(o[i]);
                    canvas.drawCircle(x, y, dp2px(3), circlePaint);
                    canvas.drawCircle(x, y, dp2px(3), pointPaint);
                }
            }
        }
    }

    public void startDraw(Map<String, Float> mapx, String[] ysplit, String unit, int margin, int textSize) {
        start=true;
        this.mapx = mapx;
        this.ysplit = ysplit;
        this.unit = unit;
        this.textSize = textSize;
        this.margin = margin;
        initView();
        invalidate();
    }


}

• 调用

public class MainActivity extends AppCompatActivity {



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ZheXianView zheXianView=findViewById(R.id.zhexian);

        Map<String ,Float> map=new LinkedHashMap<>() ;
        map.put("周一",8.0f);
        map.put("周2",19.0f);
        map.put("周3",10.0f);
        map.put("周4",30.0f);
        map.put("周5",15.0f);
        map.put("周6",40.0f);
        map.put("周7",35.0f);
        map.put("周8",8.0f);
        map.put("周9",19.0f);
        map.put("周10",10.0f);
        map.put("周11",30.0f);
        map.put("周12",15.0f);
        map.put("周13",40.0f);
        map.put("周14",35.0f);
        map.put("周15",8.0f);
        map.put("周16",19.0f);
        map.put("周17",10.0f);
        map.put("周16",30.0f);


        String[] a=new String[]{"10","20","30","40","50","70","80","90"};
        zheXianView.startDraw(map,a,"m/s",60,8);

        //map为横坐标数据和点数据，a为纵坐标刻度（为数字类型的字符串，m/s为纵坐标单位,40为坐标轴距离边界的位置dp，14是坐标轴字体大小）



    }
}

• 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    tools:context=".MainActivity">

 <com.example.line_chart.ZheXianView
     android:layout_width="match_parent"
     android:layout_height="400dp"
     android:id="@+id/zhexian"
     />



</LinearLayout>