柱状图

最新推荐文章于 2023-12-29 07:12:19 发布
最新推荐文章于 2023-12-29 07:12:19 发布
阅读量749 收藏
点赞数
分类专栏： Android自定义控件 文章标签： android 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whitepony/article/details/49001747
版权

效果图：




柱状图的效果是从下往上逐渐增长，并且每个柱状图是可以响应点击事件的。


package com.example.wavedemo;

import java.util.ArrayList;
import java.util.List;

import com.example.wavedemo.BarPic5.OnClickListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity3 extends Activity {
	
	private BarPic5 barPic;
	private List<BarBean> lists;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main3);
		barPic=(BarPic5) findViewById(R.id.barpic);
		lists=new ArrayList<BarBean>();
		lists.add(new BarBean("高流动性","5%",100,5));
		lists.add(new BarBean("固定收益","1%",100,1));
		lists.add(new BarBean("浮动收益","50%",100,50));
		lists.add(new BarBean("另类投资","100%",100,100));
		barPic.setData(lists);
		new Thread(barPic).start();
		barPic.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onclick(int i) {
				Toast.makeText(MainActivity3.this, lists.get(i).getDescription()+(lists.get(i).isFlag()?"选中":"取消选中"), Toast.LENGTH_SHORT).show();
			}
		});

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {

		return super.onOptionsItemSelected(item);
	}
	
	

}




package com.example.wavedemo;

import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.Paint.FontMetrics;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class BarPic5 extends View implements Runnable {
	private Paint linePaint;// 线条画笔
	private int width;// 控件的宽高
	private int height;
	private int perWidth;// 每个柱状图的宽度
	private int space = 10;// 柱状图之间的间距
	private int num = 7;// 线的条数
	private int lineSpace;// 线条之间的间隔
	private int startX, startY, endX, endY;// 记录线条的位置
	private Paint barPaint;
	private int startPadding = 20;// 要绘制的柱状图距离边界起始结束距离
	private int endPadding = 20;
	private int lineStartX, lineEndX, lineStartY, lineEndY;// 记录柱状图位置
	private int maskStartX, maskEndX, maskStartY, maskEndY;// 记录遮罩位置
	private TextPaint textPaint;
	private Paint maskPaint;// 遮罩画笔
	private FontMetrics metrics;// 字体测量
	private FontMetrics dataMetrics;
	private int baseline;
	private TextPaint dataPaint;// 绘制数据画笔
	private int dataHeight;
	private List<BarBean> lists;
	private int maskHeight;//遮罩高度
	private OnClickListener listener;

	public BarPic5(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public BarPic5(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public BarPic5(Context context) {
		super(context);
		init();
	}

	public void init() {
		linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		linePaint.setColor(Color.parseColor("#bebebe"));
		linePaint.setStrokeWidth(2);

		barPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

		textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		textPaint.setColor(Color.parseColor("#ffffff"));
		textPaint.setTextSize(50);
		textPaint.setTextAlign(Align.CENTER);
		metrics = textPaint.getFontMetrics();
		maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

		dataPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		dataPaint.setTextSize(40);
		dataPaint.setTextAlign(Align.CENTER);
		dataMetrics = dataPaint.getFontMetrics();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		width = w;
		height = h;
		maskHeight=(int) (7.0 / 8 * height);
		perWidth = (width - getPaddingLeft() - getPaddingRight() - 3 * space
				- startPadding - endPadding) / 4;
		if (num >= 2) {
			lineSpace = height / (num - 1);
		}
		barPaint.setStrokeWidth(perWidth);
		maskPaint.setStrokeWidth(perWidth);
		baseline = (int) ((-metrics.ascent + metrics.descent) / 2);
		dataHeight = (int) (-dataMetrics.ascent + dataMetrics.descent);
		
		lineEndY=maskHeight;
		
		if(lists!=null)
		{
			for(int i=0;i<lists.size();i++)
			{
				lists.get(i).setHeight(maskHeight-(lists.get(i).getActualHeight()*(maskHeight-dataHeight-dataHeight))/lists.get(i).getTotalHeight());
			}
		}
	}

	@Override
	protected void onDraw(Canvas canvas) {
		canvas.drawColor(Color.parseColor("#efefef"));
		if (lineSpace > 0)// 需要画线，初始为0
		{
			startX = getPaddingLeft();
			endX = width - getPaddingRight();
			startY=0;
			endY=0;
			for (int i = 0; i < num; i++) {
				canvas.drawLine(startX, startY, endX, endY, linePaint);
				startY += lineSpace;
				endY += lineSpace;
			}
		}
		
		
		lineStartX = lineEndX = getPaddingLeft() + startPadding + perWidth / 2;
		lineStartY = height;
		maskStartX = maskEndX = lineStartX;
		maskStartY = height;
		maskEndY = maskHeight;
		if(lists.get(0).isFlag())
		{
			barPaint.setColor(Color.parseColor("#089ae9"));
		}
		else
		{
		    barPaint.setColor(Color.parseColor("#6bc1f2"));
		}
		canvas.drawLine(lineStartX, lineStartY, lineEndX,
				lineEndY >= lists.get(0).getHeight() ? lineEndY : lists.get(0).getHeight(), barPaint);
		maskPaint.setColor(Color.parseColor("#089ae9"));
		canvas.drawLine(maskStartX, maskStartY, maskEndX, maskEndY, maskPaint);
		canvas.drawText(lists.get(0).getDescription(), lineStartX, lineStartY - baseline, textPaint);
		dataPaint.setColor(Color.parseColor("#6bc1f2"));
		canvas.drawText(lists.get(0).getData(), lineStartX, (lineEndY >= lists.get(0).getHeight() ? lineEndY : lists.get(0).getHeight()) - dataHeight, dataPaint);
		lists.get(0).setLeftX(lineStartX-perWidth/2);
		lists.get(0).setRightX(lineStartX+perWidth/2);
         ///
		
		
		
		lineStartX = lineEndX = getPaddingLeft() + startPadding + perWidth / 2
				+ space + perWidth;
		lineStartY = height;
		maskStartX = maskEndX = lineStartX;
		if(lists.get(1).isFlag())
		{
			barPaint.setColor(Color.parseColor("#63ae4e"));
		}
		else
		{
		    barPaint.setColor(Color.parseColor("#97d573"));
		}
		canvas.drawLine(lineStartX, lineStartY, lineEndX,
				lineEndY >= lists.get(1).getHeight() ? lineEndY : lists.get(1).getHeight(), barPaint);
		maskPaint.setColor(Color.parseColor("#63ae4e"));
		canvas.drawLine(maskStartX, maskStartY, maskEndX, maskEndY, maskPaint);
		canvas.drawText(lists.get(1).getDescription(), lineStartX, lineStartY - baseline, textPaint);
		dataPaint.setColor(Color.parseColor("#97d573"));
		canvas.drawText(lists.get(1).getData(), lineStartX, (lineEndY >= lists.get(1).getHeight() ? lineEndY : lists.get(1).getHeight()) - dataHeight, dataPaint);
		lists.get(1).setLeftX(lineStartX-perWidth/2);
		lists.get(1).setRightX(lineStartX+perWidth/2);
        ///

		
		
		lineStartX = lineEndX = getPaddingLeft() + startPadding + perWidth / 2
				+ space + perWidth + space + perWidth;
		lineStartY = height;
		maskStartX = maskEndX = lineStartX;
		if(lists.get(2).isFlag())
		{
			barPaint.setColor(Color.parseColor("#e99b39"));
		}
		else
		{
		    barPaint.setColor(Color.parseColor("#fec57b"));
		}

		canvas.drawLine(lineStartX, lineStartY, lineEndX,
				lineEndY >= lists.get(2).getHeight() ? lineEndY : lists.get(2).getHeight(), barPaint);
		maskPaint.setColor(Color.parseColor("#e99b39"));
		canvas.drawLine(maskStartX, maskStartY, maskEndX, maskEndY, maskPaint);
		canvas.drawText(lists.get(2).getDescription(), lineStartX, lineStartY - baseline, textPaint);
		dataPaint.setColor(Color.parseColor("#fec57b"));
		canvas.drawText(lists.get(2).getData(), lineStartX, (lineEndY >= lists.get(2).getHeight() ? lineEndY : lists.get(2).getHeight()) - dataHeight, dataPaint);
		lists.get(2).setLeftX(lineStartX-perWidth/2);
		lists.get(2).setRightX(lineStartX+perWidth/2);
        ///

		
		
		lineStartX = lineEndX = getPaddingLeft() + startPadding + perWidth / 2
				+ space + perWidth + space + perWidth + space + perWidth;
		lineStartY = height;
		maskStartX = maskEndX = lineStartX;
		if(lists.get(3).isFlag())
		{
			barPaint.setColor(Color.parseColor("#e65353"));
		}
		else
		{
		    barPaint.setColor(Color.parseColor("#ff8989"));
		}

		canvas.drawLine(lineStartX, lineStartY, lineEndX,
				lineEndY >= lists.get(3).getHeight() ? lineEndY : lists.get(3).getHeight(), barPaint);
		maskPaint.setColor(Color.parseColor("#e65353"));
		canvas.drawLine(maskStartX, maskStartY, maskEndX, maskEndY, maskPaint);
		canvas.drawText(lists.get(3).getDescription(), lineStartX, lineStartY - baseline, textPaint);
		dataPaint.setColor(Color.parseColor("#ff8989"));
		canvas.drawText(lists.get(3).getData(), lineStartX, (lineEndY >= lists.get(3).getHeight() ? lineEndY : lists.get(3).getHeight()) - dataHeight, dataPaint);
		lists.get(3).setLeftX(lineStartX-perWidth/2);
		lists.get(3).setRightX(lineStartX+perWidth/2);
		super.onDraw(canvas);
	}

	@Override
	public void run() {

		while (true) {
			try {
				Thread.currentThread().sleep(10);
				lineEndY-=2;
				postInvalidate();
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

		}
	}
	/**
	 * 传递数据，根据数据绘制柱状图
	 * @param lists
	 */
	 public void setData(List<BarBean> lists)
	 {
		 if(lists.size()!=4)
		 {
			 throw new IllegalArgumentException("集合大小应该为4");
		 }
		 this.lists=lists;
		 init();
		 invalidate();
	 }
	 
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			int x=(int) event.getX();
			int y=(int) event.getY();
			if(lists!=null)
			{
				for(int i=0;i<lists.size();i++)
				{
					if(lists.get(i).getLeftX()<x&&x<lists.get(i).getRightX()&&y>lists.get(i).getHeight()&&y<maskHeight)
					{
						lists.get(i).setFlag(!lists.get(i).isFlag());
						for(int j=0;j<lists.size();j++)
						{
							if(j!=i)
							{
								lists.get(j).setFlag(false);
							}
						}
						if(listener!=null)
						{
							listener.onclick(i);
						}
						invalidate();
						break;
					}
				}
			}
			break;

		default:
			break;
		}
		return super.onTouchEvent(event);
	}
	
	public void setOnClickListener(OnClickListener listener)
	{
		this.listener=listener;
	}
	
	public interface  OnClickListener
	{
		void onclick(int i);
	}

}


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <com.example.wavedemo.BarPic5
        android:id="@+id/barpic"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="270dp"
       
         />

</RelativeLayout>

package com.example.wavedemo;

import java.io.Serializable;

public class BarBean implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private String description;// 描述字体
	private String data;// 柱状图上面的数据
	private int totalHeight;// 控件height所对应的data
	private int actualHeight;// 柱状图height所对应的data
	private int height;//柱状图实际height
	private boolean flag;//记录是不是点击状态
	private int leftX,rightX,topY;//记录左右上边距

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getData() {
		return data;
	}

	public void setData(String data) {
		this.data = data;
	}

	public int getTotalHeight() {
		return totalHeight;
	}

	public void setTotalHeight(int totalHeight) {
		this.totalHeight = totalHeight;
	}

	public int getActualHeight() {
		return actualHeight;
	}

	public void setActualHeight(int actualHeight) {
		this.actualHeight = actualHeight;
	}

	public int getHeight() {
		return height;
	}

	public void setHeight(int height) {
		this.height = height;
	}
	

	public boolean isFlag() {
		return flag;
	}

	public void setFlag(boolean flag) {
		this.flag = flag;
	}
	
	


	public int getLeftX() {
		return leftX;
	}

	public void setLeftX(int leftX) {
		this.leftX = leftX;
	}

	public int getRightX() {
		return rightX;
	}

	public void setRightX(int rightX) {
		this.rightX = rightX;
	}

	public int getTopY() {
		return topY;
	}

	public void setTopY(int topY) {
		this.topY = topY;
	}


	@Override
	public String toString() {
		return "BarBean [description=" + description + ", data=" + data
				+ ", totalHeight=" + totalHeight + ", actualHeight="
				+ actualHeight + ", height=" + height + ", flag=" + flag
				+ ", leftX=" + leftX + ", rightX=" + rightX + ", topY=" + topY
				+ "]";
	}

	public BarBean(String description, String data, int totalHeight,
			int actualHeight) {
		super();
		this.description = description;
		this.data = data;
		this.totalHeight = totalHeight;
		this.actualHeight = actualHeight;
	}
	
	
	

}


如果需要自定义属性的话：


TypedArray types = context.obtainStyledAttributes(attrs, 
                R.styleable.barPic); 
        final int count = types.getIndexCount(); 
        Log.e("abc", count+"");
        for (int i = 0; i < count; ++i) { 
            int attr = types.getIndex(i); 
            switch (attr) { 
            case R.styleable.barPic_space: 
                space = (int) types.getDimension(attr, 10); 
                break; 
            case R.styleable.barPic_num: 
                num = types.getInteger(attr, 7); 
                break; 
            case R.styleable.barPic_startpadding: 
                startPadding = (int) types.getDimension(attr, 20); 
                break; 
            case R.styleable.barPic_endpadding: 
                endPadding = (int) types.getDimension(attr, 20); 
                break; 
            } 
        } 
        types.recycle(); 
	init();


attrs.xml文件

<resources>

    <declare-styleable name="barPic">
        <attr name="space" format="dimension" />
        <attr name="num" format="integer" />
        <attr name="startpadding" format="dimension" />
        <attr name="endpadding" format="dimension" />
    </declare-styleable>

</resources>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:haha="http://schemas.android.com/apk/res/com.example.wavedemo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <com.example.wavedemo.BarPic
        android:id="@+id/barpic"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="270dp"
        haha:num="3"
        haha:space="5dp"
        haha:startpadding="5dp"
        haha:endpadding="5dp"
         />

</RelativeLayout>


最美下雨天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 柱状图绘制
03-21
对柱状图的绘制进行封装，通过类函数setValue进行传值，根据所传的值的大小绘制不同高度的柱状图，并在柱状图顶部显示具体数值，纵坐标标有刻度，功能实现简单明了，工程文件下载即可运行。
迅速上手 Python 画图 —— 柱状图
01-20
前言 本文目标在于利用 PythonPythonPython 快速画出符合自己要求的柱状图。 最近在处理某一组成绩数据的时候，涉及了柱状图的画法，因此此处进行一下记录。 加载库 import matplotlib.pyplot as plt import matplotlib.font_manager as mfm from matplotlib import style style.use('ggplot') # 加载'ggplot'风格 # 加载中文字体 font_path = /System/Library/Fonts/STHeiti Light.ttc # 本地字体链接 prop
echarts柱状图
11-11
里面包含了echarts的柱状图和饼状图的一些动态获取数据的demo属于一个简洁明了的小demo方便参考，如果需要其他的功能，介意自己努力练习
java中利用JFreeChart生成条形统计图（柱形图）
qq_35357001的博客
12-05 3269
由于用JFreeChart生成条形统计图比较简单，所以现在简单的总结一下，自己写的，  注释不是很多， 请见谅 下面是代码，首先需要导入两个架包 jcommon-1.0.20.jar jfreechart-1.0.16.jar 第二步要写生成柱状图要用的数据了 直接在service层写接口和方法 这是在service里写的接口 list 这个方法主要是为了获得
可视化图表API格式要求有哪些？Sugar BI详细代码示例（1）
Foolforuuu的博客
04-12 650
每个图表可以对应一个数据 API，用户浏览报表时，选定一定的过滤条件，点击「查询」按钮将会通过 API 拉取相应的数据；前面说过，为了确保用户数据的安全性，Sugar BI上的所有数据请求都在Sugar BI的后端通过curl的方式访问产品线的 API，都是使用的POST请求。
数据可视化：绘制图表（一）——柱状图
Tanzy666的博客
05-28 3316
理解掌握如何用matplotlib库绘制柱状图
基本柱状图
tytaaaa11的博客
12-29 367
版权声明：本文为CSDN博主「虚心求知的熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。这里需要注意的是，bottom 参数设定的数组与 y 轴数据的参数是一一对应的，而且，两个数组的形状要相同。bottom 参数表示的是柱状图的起始位置，也就是 y 轴的起始坐标，默认值为 None。我们仍采用和上述例子相同的数据，但与之不同的是，我们对 y 轴数据的起始点进行修改。​plt.title("基本柱状图")​plt.title("基本柱状图")
【数据分析之道-Matplotlib(五)】Matplotlib柱状图
阿极的博客
05-29 6623
柱状图（Bar Plot）是一种常用的数据可视化方式，用于显示各个类别之间的比较。在Matplotlib中，可以使用bar()函数或barh()函数来绘制柱状图。
Seaborn绘制11个柱状图
张俊红的个人博客
07-04 5240
本文介绍的是如何使用seaborn来绘制各种柱状图基础柱状图水平柱状图标题设置基于DataFrame绘图hue参数设置颜色处理多维度处理个人很喜欢的一个Seaborn绘制的图形：导入库 Seaborn是matplotlib的高级封装，所以matplotlib还是要同时导入：In [1]:importpandasaspd importnumpyasnp imp...
[数据可视化] 柱状图
Hudas的博客
08-25 3118
本文主要讲解柱状图(纵向柱状图和横向柱状图)
highcharts柱状图
09-04
highcharts柱状图
javaweb柱状图
05-12
jsp中的柱状图 它是应用于java领域的一种简单的代码 希望能帮到大家
opencv实现gamma灰阶检测
羽凌寒
06-05 3255
简介 　　本篇讲解使用opencv来测试，表示camera gamma参数的灰阶卡图片指标：YA Block、DynamicRange、Gray Scale。 具体实现 实现代码 #include #include #include #include #include #include #include #include "opencv2/imgproc/i
Winform自定义控件-进度条/图片图标进度条
qq_38469552的博客
11-03 3064
[前言] 时间紧迫(bushanyanci),在此就不做过多介绍了. [功能原理] 实现一个自定义进度条,进度条的目的就是作为显示进度的数据可视化控件,具体原理就是填充两种或多种不同颜色比例的矩形框或Path,主要有两种方法实现: 1.重绘/重写控件; 2.自定义控件; 由于本人没有深入研究过重绘/重写,本文主要是自定义控件. [样式展示] 1.原生样式进度条,百分比、背景和前景颜色可自定义: 2.带图片/图标显示进度进度条,图片/图标、背景、前景、百分比、圆角可自定义 [原生样式] 1.新建用户控件
使用JAVA调用热敏打印机接口实现打印功能
热门推荐
qq_41852045的博客
05-10 1万+
一 前言前段时间在开发项目时，需要实现打印的功能，有着封装好的工具类，不过使用的时候有些地方还是遇到了一些小坑，在此整理出来希望对大家有所帮助。二 准备工作1.实体类和工具类实体类package com.yc.entity; import lombok.Data; import java.io.Serializable; /** * @author Wzh * Create by Wz...
jfreechart实现柱状图排序
httpmiao的专栏
03-27 420
今天在网上查了一下，没有发现 Jfreechart柱状图排序的实现方法，也还没来得及研究Jfreechart的代码和文档，所以就自己实现了一下。可能jfreechart自身有这个功能，可是发现以前的这个功能无效了，不知道用什么新方法实现这个功能了，所以只好自己实现了。 [code="java"] package my; import java.awt.Color; i...
可视化常见绘图（四）柱状图
pcx171的博客
12-31 7100
详细介绍柱状图的组成、使用场景和matplotlib实现。
ECharts基础柱状图
shaonianmoyou的博客
08-23 9210
。
Android滚动选取金额
huohacker的专栏
06-15 4969
UI效果图： 最终的效果是可以滑动刻度来选取金额，并且滑动停止后必须定位到某个金额上，不能停留在中间。          分析：决定用listview来实现上述效果                     分析UI图，发现有三种类型的item，短的，长的，还有长的带文字的。 1.listview所用的adapter的实现。 ListAdaptera.java文件 packa
markdown 柱状图
最新发布
04-13
然而，Markdown本身并不支持绘制柱状图，但可以通过其他工具或库来实现。 如果你想在Markdown中插入柱状图，可以使用一些第三方工具或库，如Plotly、Matplotlib等。这些工具可以生成图表，并将其嵌入到Markdown文...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值