饼状图

最新推荐文章于 2025-04-17 14:18:46 发布
原创 最新推荐文章于 2025-04-17 14:18:46 发布 · 544 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #控件

项目需求：






实现代码：


package com.example.wavedemo;

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

public class BingPic2 extends View{
	private Paint paint;
	private int height;//控件的高度
	private int width;//空间的宽度
	private int w;
	private int h;
	private TextPaint textpaint;//绘制文字的画笔
	private int radius;//饼图的半径
	private RectF rectf1;

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

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

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

	private void init() {
		paint=new Paint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG);
		paint.setAntiAlias(true);
		textpaint=new TextPaint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG);
		textpaint.setAntiAlias(true);
		textpaint.setColor(Color.parseColor("#123435"));
		textpaint.setTextSize(20);
		
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(heightMeasureSpec, heightMeasureSpec);
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}
	
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		this.w=w;
		this.h=h;
		height=h-100;
		width=w-100;
		radius=(width-200)/2+50;
		rectf1=new RectF(100, 100, width, height);
		
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		paint.setColor(Color.parseColor("#4476b6"));
		canvas.drawArc(rectf1, 0, 30, true, paint);
		canvas.save();
		canvas.translate(w/2, h/2);
		canvas.rotate(15);
		canvas.drawText("1000", radius, 0, textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#b94542"));
		canvas.drawArc(rectf1, 31, 140, true, paint);
		canvas.save();
		canvas.translate(w/2, h/2);
		canvas.rotate(30+140/2);
		canvas.drawText("1000", radius, 0, textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#92b44e"));
		canvas.drawArc(rectf1, 172, 70, true, paint);
		canvas.save();
		canvas.translate(w/2, h/2);
		canvas.rotate(172+70/2);
		canvas.drawText("1000", radius, 0, textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#755999"));
		canvas.drawArc(rectf1, 243, 116, true, paint);
		canvas.save();
		canvas.translate(w/2, h/2);
		canvas.rotate(243+116/2);
		canvas.drawText("1000", radius, 0, textpaint);
		canvas.restore();
	}
	

}


效果图：

这种效果很明显 饼图文字也随着旋转了（主要利用canvas的rotate方法）。


另一只方式：


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.RectF;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;
/**
 * 
 * @author huozhenpeng
 *
 */
public class BingPic extends View {
	private Paint paint;
	private int height;// 控件的高度
	private int width;// 空间的宽度
	private int w;
	private int h;
	private TextPaint textpaint;// 绘制文字的画笔
	private int radius;// 饼图的半径
	private RectF rectf1;
	private List<Integer> lists;// 存放四个角度
	private List<Integer>  datas;//存放描述数据
	public BingPic(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

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

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

	private void init() {
		paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		paint.setAntiAlias(true);
		textpaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		textpaint.setAntiAlias(true);
		textpaint.setColor(Color.parseColor("#123435"));
		textpaint.setTextSize(20);
		textpaint.setTextAlign(Align.CENTER);
		invalidate();

	}

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

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		this.w = w;
		this.h = h;
		height = h - 100;
		width = w - 100;
		radius = (w - 200) / 2 + 50;
		rectf1 = new RectF(100, 100, width, height);

	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		paint.setColor(Color.parseColor("#4476b6"));
		canvas.drawArc(rectf1, 0+1, lists.get(0)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(datas.get(0)+"",
				(float) (radius * Math.cos(lists.get(0) / 2 * Math.PI / 180)),
				(float) (radius * Math.sin(lists.get(0) / 2 * Math.PI / 180)),
				textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#b94542"));
		canvas.drawArc(rectf1, lists.get(0) + 1, lists.get(1)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(1)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1) / 2)
						* Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1) / 2)
						* Math.PI / 180)), textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#92b44e"));
		canvas.drawArc(rectf1, lists.get(0) + lists.get(1) + 1, lists.get(2)-1,
				true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(2)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1) + lists
						.get(2) / 2) * Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1) + lists
						.get(2) / 2) * Math.PI / 180)), textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#755999"));
		canvas.drawArc(rectf1, lists.get(0) + lists.get(1) + lists.get(2) + 1,
				lists.get(3)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(3)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1)
						+ lists.get(2) + lists.get(3) / 2)
						* Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1)
						+ lists.get(2) + lists.get(3) / 2)
						* Math.PI / 180)), textpaint);
		canvas.restore();

	}

	public void setData(List<Integer> lists,List<Integer> datas) {
		if (lists.size()!= 4) {
			throw new IllegalArgumentException("参数长度应为4"); 
		}
		this.lists = lists;
		this.datas=datas;
		init();
	}

}



配置文件：





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

    <com.example.wavedemo.BingPic
        android:id="@+id/bingpic"
        android:layout_width="270dp"
        android:layout_height="270dp" />

</RelativeLayout>








MainActivity类



 bingpic=(BingPic) this.findViewById(R.id.bingpic);
        List<Integer> lists=new ArrayList<Integer>();
        lists.add(30);
        lists.add(100);
        lists.add(110);
        lists.add(120);
        List<Integer> datas=new ArrayList<Integer>();
        datas.add(10000);
        datas.add(20000);
        datas.add(3000);
        datas.add(40000);
        bingpic.setData(lists,datas);

lists集合中的数据加起来应是360度。

效果图：















3.加入动画效果


代码跟上面基本差不多




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.RectF;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;
/**
 * 
 * @author huozhenpeng
 *
 */
public class BingPic extends View implements Runnable{
	private Paint paint;
	private int height;// 控件的高度
	private int width;// 空间的宽度
	private int w;
	private int h;
	private TextPaint textpaint;// 绘制文字的画笔
	private int radius;// 饼图的半径
	private RectF rectf1;
	private List<Integer> lists;// 存放四个角度
	private List<Integer>  datas;//存放描述数据
	private boolean isStartAnimation;//是否启用动画
	private int delta;//如果启用动画，每次的增量值
	public BingPic(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

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

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

	private void init() {
		paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		paint.setAntiAlias(true);
		textpaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
		textpaint.setAntiAlias(true);
		textpaint.setColor(Color.parseColor("#123435"));
		textpaint.setTextSize(20);
		textpaint.setTextAlign(Align.CENTER);
		invalidate();

	}

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

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		this.w = w;
		this.h = h;
		height = h - 100;
		width = w - 100;
		radius = (w - 200) / 2 + 50;
		rectf1 = new RectF(100, 100, width, height);

	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		paint.setColor(Color.parseColor("#4476b6"));
		canvas.drawArc(rectf1, 0+1, isStartAnimation?(delta<=lists.get(0)-1?delta:lists.get(0)-1):lists.get(0)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(datas.get(0)+"",
				(float) (radius * Math.cos(lists.get(0) / 2 * Math.PI / 180)),
				(float) (radius * Math.sin(lists.get(0) / 2 * Math.PI / 180)),
				textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#b94542"));
		canvas.drawArc(rectf1, lists.get(0) + 1, isStartAnimation?(delta<=lists.get(1)-1?delta:lists.get(1)-1):lists.get(1)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(1)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1) / 2)
						* Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1) / 2)
						* Math.PI / 180)), textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#92b44e"));
		canvas.drawArc(rectf1, lists.get(0) + lists.get(1) + 1, isStartAnimation?(delta<=lists.get(2)-1?delta:lists.get(2)-1):lists.get(2)-1,
				true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(2)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1) + lists
						.get(2) / 2) * Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1) + lists
						.get(2) / 2) * Math.PI / 180)), textpaint);
		canvas.restore();
		paint.setColor(Color.parseColor("#755999"));
		canvas.drawArc(rectf1, lists.get(0) + lists.get(1) + lists.get(2) + 1,
				isStartAnimation?(delta<=lists.get(3)-1?delta:lists.get(3)-1):lists.get(3)-1, true, paint);
		canvas.save();
		canvas.translate(w / 2, h / 2);
		canvas.drawText(
				datas.get(3)+"",
				(float) (radius * Math.cos((lists.get(0) + lists.get(1)
						+ lists.get(2) + lists.get(3) / 2)
						* Math.PI / 180)),
				(float) (radius * Math.sin((lists.get(0) + lists.get(1)
						+ lists.get(2) + lists.get(3) / 2)
						* Math.PI / 180)), textpaint);
		canvas.restore();

	}

	public void setData(List<Integer> lists,List<Integer> datas) {
		if (lists.size()!= 4) {
			throw new IllegalArgumentException("参数长度应为4"); 
		}
		this.lists = lists;
		this.datas=datas;
		init();
	}

	@Override
	public void run() {
		while(true)
		{
			delta+=1;
			try {
				Thread.sleep(30);
				postInvalidate();
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
	/**
	 * 是否有动画
	 * @param isAnimation
	 */
	public void setAnication(boolean isAnimation)
	{
		this.isStartAnimation=isAnimation;
		init();
	}
	
	

}




 bingpic=(BingPic) this.findViewById(R.id.bingpic);
        List<Integer> lists=new ArrayList<Integer>();
        lists.add(30);
        lists.add(100);
        lists.add(110);
        lists.add(120);
        List<Integer> datas=new ArrayList<Integer>();
        datas.add(10000);
        datas.add(20000);
        datas.add(3000);
        datas.add(40000);
        bingpic.setData(lists,datas);
        bingpic.setAnication(true);
        new Thread(bingpic).start();



如果需要设置动画





 bingpic.setAnication(true);

 new Thread(bingpic).start();
不需要动画的话，不需要写这两条代码。
















                

        

    


  



    



                



	

		

			

				
					
最全Python绘制饼形图（饼状图）

				
			

			

				

					阿黎逸阳的博客
				

				

					02-04
					
					8万+
					
				

			

		

		

			
				
让你彻底学会用Python绘制饼状图。

			
		

	



                

            
              



	

		

			

				
					
Python可视化数据分析-饼状图

				
			

			

				

					weixin_44686138的博客
				

				

					04-20
					
					3840
					
				

			

		

		

			
				
使用python绘制饼状图，可视化分析数据

			
		

	



              


  
              

                


	

		

			

				
					
数据可视化--饼状图

				
			

			

				

					qq_42309685的博客
				

				

					08-26
					
					4052
					
				

			

		

		

			
				
数据可视化–饼状图
功能：模拟从后台获取数据，将数据绘制成饼状图，效果如下：
<canvas height="500px" width="800px"></canvas>
	<script>
		//模拟从后台获取数据
		var data = [
		    {title:'15-20岁',num:6},
		    {title:'20-25岁',num:3...

			
		

	





	

		

			

          精选资源
				
					
piechart.zip_Labview饼状图_labview piechart_labview 画饼图_piechart la

				
			

			

				

					07-15
				

			

		

		

			
				
在LabVIEW编程环境中，饼状图（Pie Chart）是一种常用的数据可视化工具，它能直观地展示数据比例关系，尤其适用于对比各个部分占总体的比例。标题中的"piechart.zip_Labview饼状图_labview piechart_labview 画饼图_...

			
		

	



		

			
		



	

		

			

				
					
3DMAX饼状图生成插件PieChart下载

				
			

			

				

					10-26
				

			

		

		

			
				
在数据可视化方面，3DMAX虽然不是专业软件，但通过第三方开发的插件，比如本文要介绍的PieChart插件，可以实现复杂的数据可视化效果，具体来说就是三维饼状图的生成。  PieChart插件是专为3DMAX设计的，它提供了一个...

			
		

	





	

		

			

          精选资源
				
					
delphi 编程实现饼状图

				
			

			

				

					08-06
				

			

		

		

			
				
在Delphi编程中，创建饼状图是一种常见的数据可视化方式，尤其适用于显示部分与整体之间的比例关系。Delphi自身提供了一系列强大的控件和图形库，使得开发者能够轻松地实现饼状图的绘制和交互功能。以下是一些关于...

			
		

	





	

		

			

				
					
Qml饼状图QmlChartView.7z

				
			

			

				

					07-20
				

			

		

		

			
				
在这个场景中，"Qml饼状图QmlChartView.7z" 提供的资源很可能是一个关于如何在QML中创建和展示饼状图的示例或库。  饼状图是一种常见的数据可视化工具，用于显示数据比例关系。在QML中，我们可以使用QmlChartView...

			
		

	





	

		

			

          精选资源
				
					
QT自定义控件-饼状图（环形饼状图）（含代码和demo）

				
			

			

				

					08-25
				

			

		

		

			
				
本教程将详细讲解如何在QT中实现一个自定义的饼状图（环形饼状图）控件，包括代码解析和实际运行的demo。  首先，我们需要了解QT中的QWidget类，它是所有用户界面组件的基础类，提供了基本的绘制、事件处理等功能。...

			
		

	





	

		

			

				
					
HTML中的3D饼状图

				
			

			

				

					06-20
				

			

		

		

			
				
虽说echarts已经提供了比较全面的图表，但是涉及到的类库很多，资源很多。一不小心就容易弄错。这款饼状图插件很轻量，适合做个性化裁剪。

			
		

	





	

		

			

				
					
柱状图及饼状图demo

				
			

			

				

					11-24
				

			

		

		

			
				
不知道为什么默认需要积分，只想分享一下的，需要的留个言就好

			
		

	





	

		

			

				
					
绘制饼状图

				
			

			

				

					qq_42678086的博客
				

				

					06-20
					
					474
					
				

			

		

		

			
				
目录饼图组件titletooltipvisualmapseries南丁格尔图文本标签itemstylepopup动画
饼图
直观反映给用户各股票板块在市场中所占比例，帮助用户了解市场。
组件
title
定义饼图标题，位置，距离容器顶部的高度，以及颜色

tooltip
本次trigger采用item属性区别于K线图，并采用字符串模板反应提示框内容

visualmap
视觉映射组件，就是将数据映射到视觉元素，将不同的数据板块采用不同的颜色区分，如果不增加该组件各个数据板块之间只有线条隔离，使用户分析图表更

			
		

	





	

		

			

				
					
饼图 - Pie Chart

					
最新发布

				
			

			

				

					wyzx073的博客
				

				

					04-17
					
					3690
					
				

			

		

		

			
				
通过上述四个示例，我们可以看到不同图表库在绘制饼图方面的强大功能和灵活性。选择合适的工具和方法，可以使数据可视化更加直观和有效。

			
		

	





	

		

			

				
					
swift_饼状图

				
			

			

				

					NoPolun_iOS的博客
				

				

					12-09
					
					791
					
				

			

		

		

			
				
import UIKit
import Charts
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //创建一个图表数据记录类型的数组
        var entries1 : [ChartDataEntry] = A...

			
		

	





	

		

			

				
					
饼状图&柱状图

				
			

			

				

					weixin_30883271的博客
				

				

					08-15
					
					464
					
				

			

		

		

			
				
queryReportGraphics.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale...

			
		

	





	

		

			

				
					
3.8 绘制饼状图

				
			

			

				

					yummy的博客
				

				

					04-20
					
					1186
					
				

			

		

		

			
				
3.8 绘制饼状图
前言：
饼图很紧凑，看上去很有美感，但是它们也因为难以对数量进行比较而备受批评。饼图的另一个不好的特征是它以特定角度（视角）的方式和一定颜色的扇形展示数据，这会使我们的感觉有倾向性，从而影响我们对于所呈现数据得出的结论。

饼图在很多方面很特别，最重要的一点是它显示的数据集合加起来必须等于100%，否则它就是无意义的、无效的。
下面我们来看一个分裂式饼状图的示例

"""
绘制分裂饼状图
"""
import numpy as np
import matplotlib.pyplot as

			
		

	





	

		

			

				
					
Echarts可视化教程（四）——饼状图的绘制

				
			

			

				

					fh8uuc的博客
				

				

					10-21
					
					7723
					
				

			

		

		

			
				
饼状图的核心特点是能够展示数据的比例情况，通过不同的颜色在圆中的面积大小，可以一眼看出各个数据的分布情况。嵌套圆环图有两组数据，一组是内层的数据，一组是外层的数据，外层数据是对内层数据的细化，内层的一项可以在外层对应一项或者几项。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码（有两处），这段代码画出来的是一个饼状图，你补充的代码需要保证内层是一个标准饼状图，它的半径是。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值