【ca88娱乐】Canvas画扇形统计图,扇形统计图

问题:什么在ppt中画扇形总计图?

window.onload=function() {

ca88娱乐 1

【ca88娱乐】Canvas画扇形统计图,扇形统计图。世家好,前几天大家共同来做个扇形总计图,近来自家在自定义view方面依旧二个小白,如有错误的地点,请我们及时建议,我们一齐成长。

ca88娱乐,回答:能够在excel中创造好后复制到ppt中

var data=[0.2,0.4,0.1,0.2,0.1];//八个扇形的占比

night_rain.png

国际惯例,先上UI妹子做的功用图:

UI制图.png

回答:1、点插入菜单——图表;

var
dataColor=[“#F8ACAC”,’#9185F8′,’#FD7ADF’,’#65E0F9′,’#6EF668′];//多少个扇形的水彩

Android
开拓中不可防止的会有一点总计的须求,为了酬答变化莫测的供给,作为大家开垦者就需求学会运用Android暴光给我们的接口,来绘制大家友好的View;

在上大家自个儿绘制的职能图:

效果图.png

效果图1.png

此间,大家就要一步一步的去贯彻它了!!!

2、选取饼图,采用中间一种饼图样式,点规定。

var angleStart=0,angleEnd,angle;

首先承袭View

    //用户数据
    private List<Integer> mNumbers = new ArrayList<>();
    //用户指定的颜色
    private List<Integer> mColors = new ArrayList<>();
    //用户指定的提示内容
    private List<String> hintContents = new ArrayList<>();
    //用户指定文字的颜色
    private int textColor = Color.parseColor("#000000");
    //用户指定线条的颜色
    private int lineColor = Color.parseColor("#000000");
    //用户数据的总数
    private int sum = 0;
    //控件的高度
    private int mMeasuredHeight;
    //控件的宽度
    private int mMeasuredWidth;
    //中心点坐标
    private float cirX;
    private float cirY;

public class StatisticsCircle extends View {

    public StatisticsCircle(Context context) {
        super(context);
    }

    public StatisticsCircle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    public StatisticsCircle(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }
}

思路

1.自定义属性。
2.测量宽和高(规定我们所需要的区域)。
3.制图(绘制扇形、绘制扇形上的线段、绘制文本)。

上面大家就依据上述3个步骤去完结它。

回答:布署饼图就可以

var Q3Canvas=document.getElementById(‘Q3-canvas’);

开始化画笔

既然如此要绘制本身的view,画笔是至关重要的

    /**
     * 初始化画笔
     */
    private void initPaint() {
        initPicPaint();
        initLinePaint();
        initTextPaint();
    }

    /**
     * 绘制文字画笔
     */
    private void initTextPaint() {
        mTextPaint = new Paint();
        //设置抗锯齿
        mTextPaint.setAntiAlias(true);
        //图像抖动处理
        mTextPaint.setDither(true);
        //填充和描边
        mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        //设置线和文字的颜色
        mTextPaint.setColor(textColor);
        //设置文字的大小
        mTextPaint.setTextSize(CommonUtil.getConverUtil().converSp2Px(10));
    }

    /**
     * 绘制直线画笔
     */
    private void initLinePaint() {
        mLinPaint = new Paint();
        mLinPaint.setAntiAlias(true);
        mLinPaint.setDither(true);
        mLinPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        //设置画笔的宽度
        mLinPaint.setStrokeWidth(CommonUtil.getConverUtil().convertDp2Px(1));
        //设置画笔的颜色
        mLinPaint.setColor(lineColor);
    }

    /**
     * 绘制弧形的画笔
     */
    private void initPicPaint() {
        mPicPaint = new Paint();
        //抗锯齿
        mPicPaint.setAntiAlias(true);
        //抖动处理
        mPicPaint.setDither(true);
        //填充和描边
        mPicPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

1.自定义属性

在value文件夹上面新建attrs.xml

<resources>
    <declare-styleable name="CircleView">
        <!--字体大小-->
        <attr name="circle_text_size" format="dimension"></attr>
        <!--同心圆之间的距离-->
        <attr name="concentric_circle_space" format="dimension"></attr>
        <!--外圈和屏幕直接的距离-->
        <attr name="out_screen_space" format="dimension"></attr>
        <!--外圈画笔宽度-->
        <attr name="out_paint_width" format="dimension"></attr>

    </declare-styleable>


</resources>

下一场在重写的构造方法里面去取得大家自定义的性质何况给定他们最初值。

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
        textSize=array.getDimension(R.styleable.CircleView_circle_text_size,
                        dip2px(context, 14));
        concentricCircleSpace=array.getDimension(R.styleable.CircleView_concentric_circle_space,
                dip2px(context, 120));
        outScreenSpace=array.getDimension(R.styleable.CircleView_out_screen_space,
                dip2px(context, 110));
        outPaintWidth=array.getDimension(R.styleable.CircleView_out_paint_width,
                dip2px(context, 2));
        array.recycle();


        /**
         * 初始化数据
         */

        //外层弧
        mPaintOut = new Paint();
        mPaintOut.setAntiAlias(true);
        mPaintOut.setColor(getResources().getColor(R.color.gray));
        mPaintOut.setStyle(Paint.Style.STROKE);
        mPaintOut.setStrokeCap(Paint.Cap.ROUND);
        mPaintOut.setStrokeWidth(outPaintWidth);

        //内部扇形
        mPaintCurrent = new Paint();
        mPaintCurrent.setAntiAlias(true);
        //设置为填充
        mPaintCurrent.setStyle(Paint.Style.FILL);
        mPaintCurrent.setStrokeCap(Paint.Cap.ROUND);

        //字体
        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setStyle(Paint.Style.STROKE);
        mPaintText.setTextSize(textSize);