手動擼個Android雷達圖（蜘蛛網圖）RadarView

来源:https://www.cnblogs.com/taixiang/archive/2018/05/13/9032955.html
-Advertisement-
Play Games

公司產品需要一個雷達圖來展示各維度的比重，網上找了一波，學到不少，直接自己上手來擼一記 無圖言虛空 簡單分析一波，確定雷達圖正幾邊形的 正五邊形 int count=5，分為幾個層數 4 層 int layerCount=4 主要這幾步，開擼！ 自定義RadarView繼承View 確定需要使用的變 ...


公司產品需要一個雷達圖來展示各維度的比重，網上找了一波，學到不少，直接自己上手來擼一記

無圖言虛空

image

簡單分析一波，確定雷達圖正幾邊形的--正五邊形 int count=5，分為幾個層數--4 層 int layerCount=4

    @Override

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawPolygon(canvas);//畫邊
        drawLines(canvas);//畫線
        drawText(canvas);//描繪文字
        drawRegion(canvas);//覆蓋區域
    }

主要這幾步，開擼！

自定義RadarView繼承View

確定需要使用的變數，初始化paint，計算圓心角

private int count = 5; //幾邊形    
private int layerCount = 4; //層數    
privatefloatangle; //每條邊對應的圓心角   
private int centerX; //圓心x    
private int centerY; //圓心y    
privatefloatradius; //半徑    
private Paint polygonPaint; //邊框paint    
private Paint linePaint; //連線paint    
private Paint txtPaint; //文字paint    
private Paint circlePaint; //圓點paint    
private Paint regionColorPaint; //覆蓋區域paint    
private Double[] percents = {0.91, 0.35, 0.12, 0.8, 0.5}; //覆蓋區域百分比    
private String[] titles = {"dota","鬥地主","大吉大利，晚上吃雞","爐石傳說","跳一跳"};//文字
    public RadarView(Context context) {
        this(context, null, 0);
    }

    public RadarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //計算圓心角
        angle = (float) (Math.PI * 2 / count);

        polygonPaint = new Paint();
        polygonPaint.setColor(ContextCompat.getColor(context, R.color.radarPolygonColor));
        polygonPaint.setAntiAlias(true);
        polygonPaint.setStyle(Paint.Style.STROKE);
        polygonPaint.setStrokeWidth(4f);

        linePaint = new Paint();
        linePaint.setColor(ContextCompat.getColor(context, R.color.radarLineColor));
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setStrokeWidth(2f);

        txtPaint = new Paint();
        txtPaint.setColor(ContextCompat.getColor(context, R.color.radarTxtColor));
        txtPaint.setAntiAlias(true);
        txtPaint.setStyle(Paint.Style.STROKE);
        txtPaint.setTextSize(DensityUtil.dpToPx(context, 12));

        circlePaint = new Paint();
        circlePaint.setColor(ContextCompat.getColor(context, R.color.radarCircleColor));
        circlePaint.setAntiAlias(true);

        regionColorPaint = new Paint();
        regionColorPaint.setColor(ContextCompat.getColor(context, R.color.radarRegionColor));
        regionColorPaint.setStyle(Paint.Style.FILL);
        regionColorPaint.setAntiAlias(true);

    }

確定中心點

需要正五邊形得有一個圓，圓內接正五邊形，在onSizeChanged方法里獲取圓心，確定半徑

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        radius = Math.min(h, w) / 2 * 0.7f;
        centerX = w / 2;
        centerY = h / 2;
    }

繪製正五邊形

繪製正五邊形同時描繪最外圍的點，確定分為4層，半徑 / 層數 =每層之間的間距，從最裡層開始畫正五邊形，每層第一個點位於中心點正上方

  private void drawPolygon(Canvas canvas) {
        Path path = new Path();
        float r = radius / layerCount;
        for (int i = 1; i <= layerCount; i++) {
            float curR = r * i; //當前所在層的半徑
            for (int j = 0; j < count; j++) {
                if (j == 0) {
                    //每一層第一個點坐標
                    path.moveTo(centerX, centerY - curR);  
                } else {
                    //順時針記錄其餘頂角的點坐標
                    float x = (float) (centerX + Math.sin(angle * j) * curR);
                    float y = (float) (centerY - Math.cos(angle * j) * curR);
                    path.lineTo(x, y);
                }
            }
            //最外層的頂角外面的五個小圓點(圖中紅色部分)
            if (i == layerCount) {
                for (int j = 0; j < count; j++) {
                    float x = (float) (centerX + Math.sin(angle * j) * (curR + 12));
                    float y = (float) (centerY - Math.cos(angle * j) * (curR + 12));
                    canvas.drawCircle(x, y, 4, circlePaint);
                }
            }
            path.close();
            canvas.drawPath(path, polygonPaint);
        }
    }

image.png

繪製連線

繪製最內層頂角到最外層頂角的連線

  private void drawLines(Canvas canvas) {
        float r = radius / layerCount;
        for (int i = 0; i < count; i++) {
            //起始坐標 從中心開始的話 startx=centerX , startY=centerY
            float startX = (float) (centerX + Math.sin(angle * i) * r);
            float startY = (float) (centerY - Math.cos(angle * i) * r);
            //末端坐標
            float endX = (float) (centerX + Math.sin(angle * i) * radius);
            float endY = (float) (centerY - Math.cos(angle * i) * radius);
            canvas.drawLine(startX, startY, endX, endY, linePaint);
        }
    }

image.png
至此簡易雷達圖成型，可以修改正幾邊形，多少層數（後續繼續添加文字）

    //設置幾邊形，**註意：設置幾邊形需要重新計算圓心角**
    public void setCount(int count){
        this.count = count;
        angle = (float) (Math.PI * 2 / count);
        invalidate();
    }

    //設置層數
    public void setLayerCount(int layerCount){
        this.layerCount = layerCount;
        invalidate();
    }

設置正六邊形、六層

    radarView.setCount(6);
    radarView.setLayerCount(6);

image.png

對於以下圖形的，可以設置第一個點坐標位於中心點正右側(centerX+curR,centerY)，順時針計算其餘頂點坐標x = (float) (centerX+curR*Math.cos(angle*j)), y = (float) (centerY+curR*Math.sin(angle*j))，同理連線等其餘坐標相應改變...
image.png

描繪文字

由於各產品維度內容不同，所需雷達圖樣式不一，這裡只是描繪下不同位置的文字處理情況，具體需求還得按產品來，因產品而異

    private void drawText(Canvas canvas) {
        for (int i = 0; i < count; i++) {
            //獲取到雷達圖最外邊的坐標
            float x = (float) (centerX + Math.sin(angle * i) * (radius + 12));
            float y = (float) (centerY - Math.cos(angle * i) * (radius + 12));
            if (angle * i == 0) {
                //第一個文字位於頂角正上方
                txtPaint.setTextAlign(Paint.Align.CENTER);
                canvas.drawText(titles[i], x, y - 18, txtPaint);
                txtPaint.setTextAlign(Paint.Align.LEFT);
            } else if (angle * i > 0 && angle * i < Math.PI / 2) {
                //微調
                canvas.drawText(titles[i], x + 18, y + 10, txtPaint);
            } else if (angle * i >= Math.PI / 2 && angle * i < Math.PI) {
                //最右下的文字獲取到文字的長、寬，按文字長度百分比向左移
                String txt = titles[i];
                Rect bounds = new Rect();
                txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
                float height = bounds.bottom - bounds.top;
                float width = txtPaint.measureText(txt);
                canvas.drawText(txt, x - width * 0.4f, y + height + 18, txtPaint);
            } else if (angle * i >= Math.PI && angle * i < 3 * Math.PI / 2) {
                //同理最左下的文字獲取到文字的長、寬，按文字長度百分比向左移
                String txt = titles[i];
                Rect bounds = new Rect();
                txtPaint.getTextBounds(txt, 0, txt.length(), bounds);
                float width = txtPaint.measureText(txt);
                float height = bounds.bottom - bounds.top;
                canvas.drawText(txt, x - width * 0.6f, y + height + 18, txtPaint);
            } else if (angle * i >= 3 * Math.PI / 2 && angle * i < 2 * Math.PI) {
                //文字向左移動
                String txt = titles[i];
                float width = txtPaint.measureText(txt);
                canvas.drawText(txt, x - width - 18, y + 10, txtPaint);
            }

        }
    }

image.png

繪製覆蓋區域

繪製覆蓋區域，百分比取連線長度的百分比(如果從中心點開始的連線，則是半徑的百分比)，此處用半徑radius減去間隔r即連線長度

   private void drawRegion(Canvas canvas) {
        Path path = new Path();
        float r = radius / layerCount;//每層的間距
        for (int i = 0; i < count; i++) {
            if (i == 0) {
                path.moveTo(centerX, (float) (centerY - r - (radius - r) * percents[i]));
            } else {
                float x = (float) (centerX + Math.sin(angle * i) * (percents[i] * (radius - r) + r));
                float y = (float) (centerY - Math.cos(angle * i) * (percents[i] * (radius - r) + r));
                path.lineTo(x, y);
            }
        }
        path.close();
        canvas.drawPath(path, regionColorPaint);
    }

image.png

至此，一個簡單的雷達圖完畢。同時歡迎關註微信公眾號
image.png

End


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux學習筆記一：遠程連接linux伺服器
    環境介紹：win7電腦，通過VM虛擬出linux系統，安裝centOS7 通過Xshell連接linux，ftp訪問伺服器資源。 遇到的問題，ftp連不上linux 解決：linux上安裝ftp服務 步驟 一、檢查是否安裝了ftp服務 rpm -qa|grep vsftpd 二、安裝ftp服務 yu ...
  • -bash: ./switch.sh: /bin/bash^M: bad interpreter: No such file or directory
    問題： 偶然使用 windows 進行編寫腳本。使用 wsl (windows subsystem for linux) 進行運行的時候，什麼事情沒有。但是當把腳本移植到遠程伺服器進行運行的時候，發現腳本執行出現了錯誤：-bash: ./switch.sh: /bin/bash^M: bad int ...
  • 痞子衡嵌入式：飛思卡爾i.MX RT系列微控制器啟動篇（1）- Boot簡介
    i.MXRT支持存儲類型一共有三種：一是96KB的ROM（即BootROM）、二是總容量3*256KB的RAM（OCRAM/DTCM/ITCM）、三是分配給外部存儲器介面控制器（SEMC/QSPI）的2GB區域。i.MXRT Boot方式主要是藉助BootROM從外部存儲器載入Application... ...
  • 虛擬機系統ubuntu12.04（內網環境下的虛擬主機）開啟遠程連接訪問
    一、工具準備： 1.內網虛擬機Ubuntu12.04系統主機一臺，開放埠為：29999 2.遠程連接軟體：mobaxterm 二、開啟步驟： 1.查看埠狀態信息： netstat -antl | grep 29999 發現29999埠處於監聽狀態 3.配置sshd_config將預設埠22設 ...
  • plsql developer 64位 註冊碼
    註冊碼product code（產品編碼）： 4vkjwhfeh3ufnqnmpr9brvcuyujrx3n3le serial Number（序列號）：226959 password（口令）: xs374ca ...
  • Mysql淺析-基礎命令（一）
    主要從以上篇幅來介紹mysql的一些知識點 一.Mysql簡介 MySQL是一個關係型資料庫管理系統，由瑞典MySQL AB 公司開發，目前屬於 Oracle 旗下產品。MySQL 是最流行的關係型資料庫管理系統之一，在 WEB 應用方面，MySQL是最好的 RDBMS (Relational Da ...
  • hive工作記錄-20180513
    Hive的數據導入： 1.從本地文件系統中導入數據到Hive表 基礎語法1 ： create table 表名(列名1 數據類型, 列名2 數據類型, … …) row format delimited fields terminated by '分隔符' stored as textfile 參數 ...
  • HBase在共用經濟互聯網業務的應用
    HDFS 與 Hbase HDFS容錯率很高，即便是在系統崩潰的情況下，也能夠在節點之間快速傳輸數據。HBase是非關係資料庫，是開源的Not-Only-SQL資料庫，它的運行建立在Hadoop上。HBase依賴於CAP定理(Consistency, Availability, and Partit... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類