Android中利用Canvas画简单柱状图

本人是一个新手 ，今天第一次写博客，然后突然看到Canvas画图，然后就用几分钟时间写了一个特别垃圾的柱状图，

用到的代码没有一点技术含量，更适合新手看。下面贴代码。

      主要代码类，里面包括坐标，柱状图，运用canvas最基本的画图方法

package com.fei.hbkd.canvas;

/**

 * Created by jyyrlei on 2016/7/13.

 */

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.Point;

import android.util.AttributeSet;

import android.view.View;

public class CoordinatesView extends View {

    /*

     * 自定义控件一般写两个构造方法 CoordinatesView(Context context)用于java硬编码创建控件

     * 如果想要让自己的控件能够通过xml来产生就必须有第2个构造方法 CoordinatesView(Context context,

     * AttributeSet attrs) 因为框架会自动调用具有AttributeSet参数的这个构造方法来创建继承自View的控件

     */

    public CoordinatesView(Context context) {

        super(context, null);

    }

    public CoordinatesView(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    /*

     * 圆心（坐标值是相对与控件的左上角的）

     */

    Point po = new Point();

    /*

     * 控件的中心点

     */

    int centerX, centerY;

    /*

     * 控件创建完成之后，在显示之前都会调用这个方法，此时可以获取控件的大小 并得到中心坐标和坐标轴圆心所在的点。

     */

    @Override

    public void onSizeChanged(int w, int h, int oldw, int oldh) {

        centerX = w / 2;

        centerY = h / 2;

        po.set(centerX, centerY);

        super.onSizeChanged(w, h, oldw, oldh);

    }

    /*

     * 自定义控件一般都会重载onDraw(Canvas canvas)方法，来绘制自己想要的图形

     */

    @Override

    public void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        Paint paint = new Paint();

        paint.setColor(Color.BLACK);//设置画笔颜色

        paint.setStrokeWidth((float) 6.0);//画笔粗细程度

        paint.setAntiAlias(true);// 设置画笔的锯齿效果

        paint.setTextSize(30);

        Paint paint1 = new Paint();

        paint1.setColor(Color.GREEN);

        paint1.setAntiAlias(true);// 设置画笔的锯齿效果

        Paint paint2 = new Paint();

        paint2.setColor(Color.BLUE);

        paint2.setTextSize(30);

        paint2.setAntiAlias(true);// 设置画笔的锯齿效果

        // 画坐标轴

        if (canvas != null) {

            canvas.drawColor(Color.WHITE);

            // 画直线

            canvas.drawLine(0, 5 * centerY / 3, 2 * centerX, 5 * centerY / 3, paint);//绘制x轴

            canvas.drawLine(centerX / 4, 0, centerX / 4, 2 * centerY, paint);//绘制y轴

            // 画X轴箭头

            int x = 2 * centerX, y = 5 * centerY / 3;//与x轴坐标第二个点的坐标一样

            drawTriangle(canvas, new Point(x, y), new Point(x - 10, y - 5),

                    new Point(x - 10, y + 5));

            canvas.drawText("城市", x - 60, y + 36, paint);

            // 画Y轴箭头

            x = centerX/4 ;//与y轴第一个点坐标一样

            y = 0;

            drawTriangle(canvas, new Point(x, y), new Point(x - 5, y + 10),

                    new Point(x + 5, y + 10));

            canvas.drawText("收入", x - 60, y + 30, paint);

            // 画中心点坐标

            // 先计算出来当前中心点坐标的值

            // 然后显示坐标

            canvas.drawText("0", (centerX / 4) - 20, (5 * centerY / 3) + 30, paint);//原点坐标0

            canvas.drawText("100", (centerX / 4) - 70, (5 * centerY / 3) - 92, paint);

            canvas.drawText("200", (centerX / 4) - 70, (5 * centerY / 3) - 214, paint);

            canvas.drawText("300", (centerX / 4) - 70, (5 * centerY / 3) - 336, paint);

            canvas.drawText("400", (centerX / 4) - 70, (5 * centerY / 3) - 458, paint);

            canvas.drawText("500", (centerX / 4) - 70, (5 * centerY / 3) - 580, paint);

            canvas.drawText("600", (centerX / 4) - 70, (5 * centerY / 3) - 702, paint);

            canvas.drawText("700", (centerX / 4) - 70, (5 * centerY / 3) - 824, paint);

        }

        if (canvas != null) {

            /*

             * TODO 画数据 所有外部需要在坐标轴上画的数据，都在这里进行绘制

             */

            canvas.drawText("石家庄", ((centerX / 4) - 20) + 30, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("保定", ((centerX / 4) - 20) + 130, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("张家口", ((centerX / 4) - 20) + 205, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("邢台", ((centerX / 4) - 20) + 305, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("邯郸", ((centerX / 4) - 20) + 380, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("秦皇岛", ((centerX / 4) - 20) + 455, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("唐山", ((centerX / 4) - 20) + 555, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("廊坊", ((centerX / 4) - 20) + 630, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("承德", ((centerX / 4) - 20) + 705, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("沧州", ((centerX / 4) - 20) + 780, (5 * centerY / 3) + 35, paint2);

            canvas.drawText("衡水", ((centerX / 4) - 20) + 850, (5 * centerY / 3) + 35, paint2);

            canvas.drawRect(150,//起始端点的X坐标；向左扩展

                    1000,//起始端点的Y坐标；向上扩展

                    200,//终止端点的X坐标；向右

                    400,// 终止端点的Y坐标；向下

                    paint1);//绘制直线所使用的画笔

            canvas.drawRect(240, 1000, 290, 500, paint1);

            canvas.drawRect(325, 1000, 375, 475, paint1);

    
4000
        canvas.drawRect(415, 1000, 465, 750, paint1);

            canvas.drawRect(500, 1000, 550, 600, paint1);

            canvas.drawRect(585, 1000, 635, 675, paint1);

            canvas.drawRect(670, 1000, 720, 426, paint1);

            canvas.drawRect(750, 1000, 800, 382, paint1);

            canvas.drawRect(830, 1000, 880, 670, paint1);

            canvas.drawRect(905, 1000, 955, 845, paint1);

            canvas.drawRect(980, 1000, 1030, 300, paint1);

        }

    }

    /**

     * 画三角形 用于画坐标轴的箭头

     */

    private void drawTriangle(Canvas canvas, Point p1, Point p2, Point p3) {

        Path path = new Path();

        path.moveTo(p1.x, p1.y);

        path.lineTo(p2.x, p2.y);

        path.lineTo(p3.x, p3.y);

        path.close();

        Paint paint = new Paint();

        paint.setColor(Color.BLACK);

        paint.setStyle(Paint.Style.FILL);

        // 绘制这个多边形

        canvas.drawPath(path, paint);

    }

    /*  canvas.drawText("画三角形：", 10, 200, p);

    // 绘制这个三角形,你可以绘制任意多边形

    Path path = new Path();

    path.moveTo(80, 200);// 此点为多边形的起点

    path.lineTo(120, 250);

    path.lineTo(80, 250);

    path.close(); // 使这些点构成封闭的多边形

    canvas.drawPath(path, p);  */

}

package com.fei.hbkd.canvas;

import android.app.Activity;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

/**

 * Created by jyyrlei on 2016/7/13.

 */

public class TestCoordinates extends AppCompatActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.coordinates);

    }

}

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <com.fei.hbkd.canvas.CoordinatesView

        android:id="@+id/bar_chart"

        android:layout_width="fill_parent"

        android:layout_height="400dp" />

</LinearLayout>

写的不好请多包涵。