蒲江 2022-05-24 10:24 采纳率: 0%
浏览 59
已结题

flutter做雷达图遇到问题

echart ios打包会出问题,于是我使用fl_chart,但是没法把背景改成间隔色,也没有找到把雷达图从圆形改成多边形的属性
如何改成多边形?如何把背景改成间隔色?
感谢!!
需要做成这样:

img

我fl_chart做成这样:

img

  • 写回答

1条回答 默认 最新

  • 歇歇 2022-05-30 02:03
    关注

    你自定义雷达图,想画成什么就画成什么。

    img

    
    public class MyPolygonView extends View {
    
        //-------------我们必须给的模拟数据-------------
        //n边形
        private int n = 6;
        //每个角对应的文字
        private String[] text = new String[]{"语文", "数学", "英语", "生物", "化学","物理"};
        //区域等级,值不能超过n边形的个数(每个角对应的值到达的层数)
        private int[] area = new int[]{3,3,2,2,3,2};
    
        //-------------View相关-------------
        //View自身的宽和高
        private int mHeight;
        private int mWidth;
    
        //-------------画笔相关-------------
        //边框的画笔
        private Paint borderPaint;
        //文字的画笔
        private Paint textPaint;
        //区域的画笔
        private Paint areaPaint;
    
        //-------------多边形相关-------------
        //n边形个数
        private int num = 4;
        //两个多边形之间的半径
        private int r = 60;
        //n边形顶点坐标
        private float x, y;
        //n边形角度
        private float angle = (float) ((2 * Math.PI) / n);
        //文字与边框的边距等级,值越大边距越小(文字与边框的距离)
        private int textAlign = 5;
    
        //-------------颜色相关-------------
        //边框颜色(整个n边型的区域颜色)
        private int mColor = getResources().getColor(R.color.app_polygon);
        //文字颜色
        private int textColor = getResources().getColor(R.color.app_black);
        //区域颜色(整个连线的颜色)
        private int strengthColor = Color.parseColor("#f9c172");
    
    
    
        public MyPolygonView(Context context) {
            super(context);
        }
    
        public MyPolygonView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public MyPolygonView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mWidth = w;
            mHeight = h;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //初始化画笔
            initPaint();
            //画布移到中心点
            canvas.translate(mWidth / 2, mHeight / 2);
            //画n边形
            drawPolygon(canvas);
            //画n边形的中点到顶点的线
            drawLine(canvas);
            //画文字
            drawText(canvas);
            //画蓝色区域
            drawArea(canvas);
        }
    
        /**
         * 初始化画笔
         */
        private void initPaint() {
            //边框画笔
            borderPaint = new Paint();
            borderPaint.setAntiAlias(true);
            borderPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            borderPaint.setColor(mColor);
            borderPaint.setStrokeWidth(3);
    
            //文字画笔
            textPaint = new Paint();
            textPaint.setTextSize(30);
            textPaint.setColor(textColor);
            textPaint.setAntiAlias(true);
    
            //区域画笔
            areaPaint = new Paint();
            areaPaint.setStrokeWidth(5);
            areaPaint.setColor(strengthColor);
            areaPaint.setAntiAlias(true);
            areaPaint.setStyle(Paint.Style.STROKE);
        }
    
        /**
         * 绘制多边形
         *
         * @param canvas
         */
        private void drawPolygon(Canvas canvas) {
            Path path = new Path();
            //n边形数目
            for (int j = 1; j <= num; j++) {
                float r = j * this.r;
                path.reset();
                //画n边形
                for (int i = 1; i <= n; i++) {
                    x = (float) (Math.cos(i * angle) * r);
                    y = (float) (Math.sin(i * angle) * r);
                    if (i == 1) {
                        path.moveTo(x, y);
                    } else {
                        path.lineTo(x, y);
                    }
                }
                //关闭当前轮廓。如果当前点不等于第一个点的轮廓,一条线段是自动添加的
                path.close();
                canvas.drawPath(path, borderPaint);
            }
        }
    
        /**
         * 画多边形线段
         *
         * @param canvas
         */
        private void drawLine(Canvas canvas) {
            Path path = new Path();
            float r = num * this.r;
            for (int i = 1; i <= n; i++) {
                path.reset();
                x = (float) (Math.cos(i * angle) * r);
                y = (float) (Math.sin(i * angle) * r);
                path.lineTo(x, y);
                canvas.drawPath(path, borderPaint);
            }
        }
    
        /**
         * 画文字
         *
         * @param canvas
         */
        private void drawText(Canvas canvas) {
            float r = num * this.r;
            for (int i = 1; i <= n; i++) {
                //测量文字的宽高
                Rect rect = new Rect();
                textPaint.getTextBounds(text[i - 1], 0, text[i - 1].length(), rect);
                float textWidth = rect.width();
                float textHeight = rect.height();
    
                x = (float) (Math.cos(i * angle) * r);
                y = (float) (Math.sin(i * angle) * r);
                //位置微调
                if (x < 0) {
                    x = x - textWidth;
                }
                if (y > 25) {
                    y = y + textHeight;
                }
                //调文字与边框的边距
                float LastX = x + x / num / textAlign;
                float LastY = y + y / num / textAlign;
                canvas.drawText(text[i - 1],LastX, LastY, textPaint);
            }
        }
    
        /**
         * 画区域
         *
         * @param canvas
         */
        private void drawArea(Canvas canvas) {
            Path path = new Path();
            for (int  i= 1;  i<= n; i++) {
                float r = area[i - 1] * this.r;
                x = (float) (Math.cos(i * angle) * r);
                y = (float) (Math.sin(i * angle) * r);
                if (i == 1) {
                    path.moveTo(x, y);
                } else {
                    path.lineTo(x, y);
                }
            }
            //关闭当前轮廓。如果当前点不等于第一个点的轮廓,一条线段是自动添加的
            path.close();
            canvas.drawPath(path, areaPaint);
        }
        public void setArea (int[] area){
            this.area =area;
            invalidate();
        }
    
    }
    
    
    评论

报告相同问题?

问题事件

  • 系统已结题 6月1日
  • 创建了问题 5月24日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题