1. 程式人生 > >自定義餅狀圖

自定義餅狀圖

自定義ViewGroup基本步驟

  • 寫構造方法
  • 寫onLayout 確定子View的位置
  • onMesure
    根據子View的佈局檔案確定子View的大小,及位置 測量分為三種
    EXACTLY 300dp matchParent
    AT_MOST wrapContent
    UNSPECIFIED 很少用
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int
widthMode = MeasureSpec.getMode(widthMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); }
  • 得到ViewGroup的parameter view.getLayoutParameter
    LineLayout.LayoutParameters等

  • onDraw()

先看一個圓餅圖 主要就這麼一個API
canvas.drawArc(mRectF ,start ,sweepAngle ,true ,mPaint);
看效果圖
這裡寫圖片描述
先準備一個bean類

public class PieDataEntity {
    private String name;
    private float value;
    private float percent;
    private int color = 0;
    private float angle = 0;

    public PieDataEntity(String name, float
value, int color) { this.name = name; this.value = value; this.color = color; } public String getName() { return name; } public void setName(String name) { this.name = name; } public float getValue() { return value; } public void setValue(float value) { this.value = value; } public float getpercent() { return percent; } public void setpercent(float percent) { this.percent = percent; } public int getColor() { return color; } public void setColor(int color) { this.color = color; } public float getAngle() { return angle; } public void setAngle(float angle) { this.angle = angle; } }
public class PieChartView extends View{
    private Paint mPaint;
    private float mRadius;
    private RectF mRectF ;
    private int width ;
    private int height ;
    private List<PieDataEntity> mPieDataEntityList ;
    public PieChartView(Context context) {
        super(context);
        init(context);
    }

    public PieChartView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public PieChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);

    }

    private void init(Context context){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mRectF = new RectF();
    }

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

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawPie(canvas);
    }

    private void drawPie(Canvas canvas) {
        if (mPieDataEntityList == null){
            return;
        }

        width = getMeasuredWidth()- getPaddingLeft() - getPaddingRight() ;
        height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom() ;
        mRadius = (float) (Math.min(width,height)/2*0.8);
        mRectF.left = (width - 2*mRadius)/2 ;
        mRectF.top = (height - 2*mRadius)/2 ;
        mRectF.right = mRectF.left + 2* mRadius ;
        mRectF.bottom = mRectF.top + 2* mRadius ;

        float start = 180 ;
        for (int i = 0 ; i< mPieDataEntityList.size();i++){
            float sweepAngle = mPieDataEntityList.get(i).getValue()/mTotalValue*360-1;//每個扇形的角度
            mPaint.setColor(mPieDataEntityList.get(i).getColor());

            canvas.drawArc(mRectF ,start ,sweepAngle ,true ,mPaint);
            start += sweepAngle+1 ;
        }
    }

    private int mTotalValue ;
    public void setData(List<PieDataEntity> pieList){
        mPieDataEntityList = pieList ;
        for (int i = 0 ; i< mPieDataEntityList.size() ; i++){
            mTotalValue += mPieDataEntityList.get(i).getValue() ;
        }
        invalidate();
    }
}

使用很簡單

int [] colors = {R.color.red_color ,R.color.colorPrimary,R.color.colorAccent,R.color.green};
        List<PieDataEntity> entities = new ArrayList<>();
        for (int i = 0 ; i< 10 ;i ++){
            PieDataEntity pieDataEntity = new PieDataEntity("hhh"+i,i+5,getResources().getColor(colors[i% colors.length]));
            entities.add(pieDataEntity);
        }
        pieChart.setData(entities);

相關推薦

定義控制元件PieView

本篇參考:GcsSloop的安卓自定義View進階-Canvas之繪製圖形 一、分析如上餅狀圖,所需要得資訊如下 各塊的顏色 所有塊量得總和 各個塊得量佔總量的百分比,並通過百分比得到各個塊所佔扇形的弧度 第一個塊得起始角

定義

自定義ViewGroup基本步驟 寫構造方法 寫onLayout 確定子View的位置 onMesure 根據子View的佈局檔案確定子View的大小,及位置 測量分為三種 EXACTLY 300dp matchPar

Android 定義及屬性動畫

前段時間公司專案中用到了統計圖,網上找了些資料和框架都不能滿足我的需求,沒辦法,只有自己寫了。 近來清閒,將其抽出一個demo了,歡迎大家交流指正。 效果圖先行 實現方案有兩個,一是自定義控制元件,二是使用屬性動畫。屬性動畫在api11以上版本才有,在11版本以下使用可以引入nin

android定義

本程式碼是一年前公司專案需要自己所寫,當時做android專案需要統計的功能,統計的圖表包括餅圖、柱狀圖、折線圖,程式碼寫的有些笨拙!希望大家能夠看懂!其程式碼做拋磚引玉,希望大家能夠再改寫下!可以用多執行緒做出動畫,是不是更好呢?這些後期我也沒有整理過,所以誰能再整理下!

定義View-(百分比

按照設定的百分比陣列,設定的百分比陣列之和要等於1,如果大於1會出現覆蓋的情況。 這個效果裡面有2個關注點: 1、通過百分比陣列繪製多大的環。 2、切換比例的時候動畫效果。 3、正在變化時接收到百分比變化的處理 1、通過百分比陣列繪製多大的環 圓環一圈是360度,如果百分比

echart 定義樣式

name nbsp ini data get ems char echarts blur echarts.init(document.getElementById(‘WaterCategoryStatistics‘)).setOption({   legend: {   

定義View繪製和環狀

最近工作中遇到一個需求,就是將不同年齡段資料以餅狀圖或者環狀圖的形式展示出來。於是利用android自定義的知識封裝一個自定義View,方便日後使用,特此記錄。   效果圖如下 1.餅狀圖 1.環狀圖 主要強調以下3部分 1.value中新增attr

Android定義View,畫一個好看帶延長線的

開發十年,就只剩下這套架構體系了! >>>   

(七十)c#Winform定義控制元件-

前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制元件,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kwwwvagaa/net_winform_custom_control.

微信小程式-多層/包含關係/定義關係模式

效果圖如下 WXML <view class='chart_wrapper'> <view class='chart_wrapper'> <view class='chart_mark'> <view class

echarts定義

前端經常會用到圖示,本人用到的不多,但是積累下來也能慢慢了解它的規律,看懂它的API,今天就積累了一類餅圖,用到的知識點當然還是官方文件的配置,有時間可以結合例項去看一下 祝大家越來越進步 Echart

android 定義

     本程式碼是一年前公司專案需要自己所寫,當時做android專案需要統計的功能,統計的圖表包括餅圖、柱狀圖、折線圖,程式碼寫的有些笨拙!希望大家能夠看懂!其程式碼做拋磚引玉,希望大家能夠再改寫下!可以用多執行緒做出動畫,是不是更好呢?這些後期我也沒有整理過,所以誰能

android定義統計折線和柱組合

本程式碼是一年前公司專案需要自己所寫,當時做android專案需要統計的功能,統計的圖表包括餅圖、柱狀圖、折線圖,程式碼寫的有些笨拙!希望大家能夠看懂!其程式碼做拋磚引玉,希望大家能夠再改寫下!可以用多執行緒做出動畫,是不是更好呢?這些後期我也沒有整理過,所以誰能再整理下!

定義的繪製

如何畫一個餅圖, 來實現資料展示的視覺化 PieChartView.h #import <UIKit/UIKit.h> @interface PieChartView : UIView @end PieChartView.

Android開發自定義控制元件實現一個

實現一個如圖所示的控制元件,包括兩部分,左邊的餅狀圖和中間的兩個小方塊,及右邊的兩行文字 實現起來比較簡單,只是一些繪圖API的呼叫 核心程式碼在onDraw函式裡邊,,對靜態控制元件進行繪製即可 @Override protected void onDraw(Canv

Qt編寫定義控制元件20-定義

一、前言 上次在寫視覺化資料大屏電子看板專案的時候,為了逐步移除對QChart的依賴(主要是因為QChart真的太垃圾了,是所有Q

使用css3制作正方形、三角形、扇形和

radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形 如果將盒容器的width和height設置為0,並為每條邊設置一個較粗的width值和彼此不同的顏色,最終會得到四個被拼接在一起三角形,它們分別指向不同的顏色。 htm

JavaScript+svg繪制的一個

圖例 n) attribute 數字類型 XML 用戶 h+ htm type svg參考:https://www.w3.org/TR/SVG/<body onload=‘document.body.appendChild( pieChart([12,23,34

PHP畫矩形,橢圓,圓,畫橢圓弧 ,

tro lips ade inpu 統計 起點 com eth func 1:畫矩形: imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere

柱形JavaScript

column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({