【Android】柱状图示例
16lz
2021-01-23
最近研究了一下柱状图,自己写了一个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
更多相关文章
- android创建数据库(SQLite)保存图片示例
- Android基础知识_Activity标准启动模式示例
- LGame(Android及J2SE游戏引擎)入门示例——如何构建一个游戏
- Androidの联系人群组Group操作示例
- android 播放音乐示例