【Android】柱状图示例

最近研究了一下柱状图,自己写了一个Demo,示例效果图如下:

MainActivity.java

package com.sg7.barchart;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity implements View.OnClickListener {

    private static final int SINGLECHART = 1;
    private static final int TOTALCHART = 2;

    private LinearLayout layout_chart;
    private Button btn_single;
    private Button btn_total;
    private TextView txv_screen;
    private TextView txv_power;

    private ChartView chartView;

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

        layout_chart = (LinearLayout) findViewById(R.id.chartArea);
        btn_single = (Button) findViewById(R.id.singleChart);
        btn_total = (Button) findViewById(R.id.totalChart);
        txv_screen = (TextView) findViewById(R.id.screenDesc);
        txv_power = (TextView) findViewById(R.id.powerDesc);

        btn_single.setOnClickListener(this);
        btn_total.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        int which = 0;

        if (id == R.id.singleChart) {
            which = SINGLECHART;
            txv_power.setVisibility(View.VISIBLE);
            txv_screen.setText("绿色: 显示器功耗");
            txv_power.setText("蓝色: 电源功耗");
        } else if (id == R.id.totalChart) {
            which = TOTALCHART;
            txv_power.setVisibility(View.INVISIBLE);
            txv_screen.setText("绿色: 总功耗");
        }

        txv_screen.setVisibility(View.VISIBLE);
        txv_screen.setTextColor(Color.GREEN);
        txv_power.setTextColor(Color.BLUE);

        chartView = new ChartView(this, which);
        layout_chart.removeAllViews();
        layout_chart.addView(chartView);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK)
            System.exit(0);
        return true;
    }
}

Chart.java

package com.sg7.barchart;

import android.graphics.Canvas;
import android.graphics.Paint;

public class Chart {

    private final int w = 20;//柱形图宽度
    private int h;//柱形图高度
    private final int total_y = 300;//柱形图最底点的y轴坐标
    private int x;//x轴的位置

    public int getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public int getH() {
        return h;
    }

    public void setH(int h) {
        this.h = h;
    }

    public void drawSelf(Canvas canvas, Paint paint) {
        canvas.drawRect(x, total_y - h, w + x, total_y - 1, paint);
    }

}

ChartView.java

package com.sg7.barchart;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class ChartView extends View {

    private int[] data_screen;
    private int[] data_power;
    private int[] data_total;
    private int flag;
    private int margin;

    private Chart chart;
    private Paint paint;

    public ChartView(Context context, int flag) {
        super(context);
        this.flag = flag;
        margin = 0;
        chart = new Chart();
        data_screen = new int[]{90, 65, 80, 115};
        data_power = new int[]{150, 125, 100, 130};
        data_total = new int[4];
        for (int i = 0; i < 4; i++)
            data_total[i] = data_screen[i] + data_power[i];
        paint = new Paint();
        paint.setAntiAlias(true);
    }

    @Override
    public void onDraw(Canvas canvas) {
        canvas.drawColor(Color.BLACK);
        drawAxis(canvas);
        drawChart(canvas);
    }

    /**
     * 画坐标轴
     *
     * @param canvas
     */
    public void drawAxis(Canvas canvas) {
        paint.setColor(Color.YELLOW);
        paint.setStrokeWidth(2);
        canvas.drawLine(30, 300, 310, 300, paint);
        canvas.drawLine(30, 20, 30, 300, paint);

        int x = 90;
        int y = 250;

        for (int i = 0; i < 4; i++) {
            //画x轴下面的数字,y轴固定,从90开始画,每次加60
            canvas.drawText(i + 1 + "", x, 320, paint);
            x += 60;
        }
        for (int i = 0; i < 5; i++) {
            //画y轴左面的数字,x轴固定,从250开始画,每次加60
            canvas.drawText(50 * (i + 1) + "", 0, y, paint);
            y -= 50;
        }
    }

    /**
     * 画柱形图
     *
     * @param canvas
     */
    public void drawChart(Canvas canvas) {
        if (flag == 1) {
            paint.setColor(Color.GREEN);
            int temp_screen = 30;
            for (int i = 0; i < 4; i++) {
                chart.setH(data_screen[i]);
                chart.setX(temp_screen + 20 * 2 + margin);
                chart.drawSelf(canvas, paint);
                margin = 20;
                temp_screen = chart.getX();
            }

            margin = 0;

            paint.setColor(Color.BLUE);
            int temp_power = 50;
            for (int i = 0; i < 4; i++) {
                chart.setH(data_power[i]);
                chart.setX(temp_power + 20 * 2 + margin);
                chart.drawSelf(canvas, paint);
                margin = 20;
                temp_power = chart.getX();
            }

            drawHighLines(canvas);
        } else if (flag == 2) {
            paint.setColor(Color.GREEN);
            int temp = 40;
            for (int i = 0; i < 4; i++) {
                chart.setH(data_total[i]);
                chart.setX(temp + 20 * 2 + margin);
                chart.drawSelf(canvas, paint);
                margin = 20;
                temp = chart.getX();
            }
        }
    }

    /**
     * 画折线图
     *
     * @param canvas
     */
    public void drawHighLines(Canvas canvas) {
        int[][] highPoints = new int[4][2];
        highPoints[0][0] = 90;
        highPoints[0][1] = data_total[0];
        highPoints[1][0] = 150;
        highPoints[1][1] = data_total[1];
        highPoints[2][0] = 210;
        highPoints[2][1] = data_total[2];
        highPoints[3][0] = 270;
        highPoints[3][1] = data_total[3];
        paint.setColor(Color.RED);
        for (int i = 0; i < 4; i++) {
            canvas.drawPoint(highPoints[i][0], 300 - highPoints[i][1], paint);
            canvas.drawText(data_total[i] + "", highPoints[i][0] - 10, 300 - highPoints[i][1] - 10,
                    paint);
        }

        float[] pts = new float[16];
        for (int i = 0; i < 12; i++) {
            pts[0] = 32;
            pts[1] = 300 - highPoints[0][1];
            pts[2] = highPoints[0][0];
            pts[3] = 300 - highPoints[0][1];
            pts[4] = highPoints[0][0];
            pts[5] = 300 - highPoints[0][1];
            pts[6] = highPoints[1][0];
            pts[7] = 300 - highPoints[1][1];
            pts[8] = highPoints[1][0];
            pts[9] = 300 - highPoints[1][1];
            pts[10] = highPoints[2][0];
            pts[11] = 300 - highPoints[2][1];
            pts[12] = highPoints[2][0];
            pts[13] = 300 - highPoints[2][1];
            pts[14] = highPoints[3][0];
            pts[15] = 300 - highPoints[3][1];
        }
        canvas.drawLines(pts, paint);
    }
}

项目中需要做柱状图的朋友们可以阅读参考一下,主要绘制步骤在ChartView.java这个类中,代码还算比较简单.

源码下载:http://download.csdn.net/detail/lingwu7/9374683