当前位置: 开发笔记 > 编程语言 > 正文

如何制作这个圆形的双色甜甜圈图表？

作者：乔父系_377 | 来源：互联网 | 2023-05-29 13:31

如何解决《如何制作这个圆形的双色甜甜圈图表？》经验，为你挑选了1个好方法。

我正在尝试制作一个看起来像下面的圆环图

甜甜圈图

我将使用angularJS,SVG和D3.js

我不知道如何获得那些圆润的结尾,请帮忙.谢谢.

1> Paul LeBeau..：

简单回答:你使用面具.

我们使用面罩来绘制表圈的内部.还有一个面具可以在中间切开一个洞.

孔掩模不是必需的.你可以用粗线形成甜甜圈.但是,我似乎更容易画出圆形扇形,然后制造漏洞.

这是SVG形式.我会把转换到D3给你.




    
        
                        charts
                        frontend
                        svg
                        char
                        js
                        漏洞
                        ide
                        io
                        ci
                    
    



    
        写下你的评论吧 !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
                                    
                
            
        

        
    

    
        推荐阅读
        
            
                                
                    
                        import
                        【Markdown】高级应用技巧与实践
                    

                    
                                                
                        注：写博客或者项目的README文档经常用到markdown语法，所以markdown的语法做了一个总结，本文是基于【markdown】基 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-10-23 11:54:55
                    

                

                
                                
                    
                        int
                        如何将Flot与AngularJS集成? - How to Integrate Flot with AngularJS?
                    

                    
                                                
                        IamnewtoAngularandFlot,butamexperiencedwithJqueryandJavascript.Iamabitconfusedabo ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-08-18 07:11:18
                    

                

                                
                    
                    
                
                
                                
                    
                        int
                        图表js远点之间的差距
                    

                    
                                                
                            
                        
                                                
                        在Chartjs中，我观察传感器的温度。温度变化很小，如果传感器停止工作，则在图 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-08-15 12:26:01
                    

                

                
                                
                    
                        int
                        MySQL初级篇——字符串、日期时间、流程控制函数的相关应用
                    

                    
                                                
                            
                        
                                                
                        文章目录：1.字符串函数2.日期时间函数2.1获取日期时间2.2日期与时间戳的转换2.3获取年月日、时分秒、星期数、天数等函数2.4时间和秒钟的转换2. ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-14 10:57:02
                    

                

                
                                
                    
                        int
                        NX二次开发：UFUN点收集器UF_UI_select_point_collection详解
                    

                    
                                                
                            
                        
                                                
                        本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发，包括必要的头文件包含、初始化和选择点集合的具体实现。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-14 10:18:35
                    

                

                
                                
                    
                        filter
                        市场最快图表：LightningChart .NET v.10.4.1 Crack
                    

                    
                                                
                            
                        
                                                
                        LightningChart.NETv.10.4.1已经发布！新功能、新自定义控件和性能改进DataCursor：图表中自动数据跟踪的新功能。在以前的版 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-09-30 16:37:08
                    

                

                
                                
                    
                        int
                        浅解XXE与Portswigger Web Sec
                    

                    
                                                
                            
                        
                                                
                        XXE与PortswiggerWebSec相关链接：博客园安全脉搏FreeBufXML的全称为XML外部实体注入，在学习的过程中发现有回显的XXE并不多，而 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-17 16:52:48
                    

                

                
                                
                    
                        go
                        d3.js实现图形拖拽
                    

                    
                                                
                        本文实例为大家分享了d3.js图形拖拽的具体代码，供大家参考，具体内容如下 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 21:11:13
                    

                

                
                                
                    
                        buffer
                        .NET饼图：如何向切片添加文本和旋转图表 - .NET pie chart: how to add text to slices and rotate chart
                    

                    
                                                
                        Thecodebelowcreatesa24slicepiechart.HowdoI:下面的代码创建了一个24切片饼图。我如何能:Addtextlabelsto ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-08-19 10:41:21
                    

                

                
                                
                    
                        int
                        如何在Google Chart中的工具提示中自定义内容
                    

                    
                                                
                        如何在Google Chart中的工具提示中自定义内容 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-08-15 17:26:15
                    

                

                
                                
                    
                        int
                        如何在谷歌图表API中添加链接 - How to add links in google chart api
                    

                    
                                                
                            
                        
                                                
                        CanIaddlinksingooglechartapi?我可以在googlechartapi中添加链接吗？Forexample,例如，HowcouldIad ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-08-08 10:50:30
                    

                

                
                                
                    
                        get
                        设置一个要显示在图表js上的数组 - Set an array to be displayed at Chart js
                    

                    
                                                
                        Forexampleihavethearray[1,2,3,4,5,6,7,8,9,10,11,12,13]andionlywanttodisplaythesubarray ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-06-24 14:11:34
                    

                

                
                                
                    
                        int
                        Excel：在XY图表中为数据点添加标签 - Excel: Add labels to data points in XY chart
                    

                    
                                                
                        IwanttohavelabelsnexttodatapointsinanExcelchart.ThereisaVBAcodefromMicrosoftfor ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-06-17 12:19:40
                    

                

                
                                
                    
                        int
                        确定Excel VBA中的点的值 - Determining the value of a point in Excel VBA
                    

                    
                                                
                        Iamtryingtohavethepointsinachartchangecoloriftheyarewithincertainvalueparamaters( ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-06-09 13:10:55
                    

                

                
                                
                    
                        get
                        隐藏一些图形元素c3js,而不卸载数据
                    

                    
                                                
                        如何解决《隐藏一些图形元素c3js,而不卸载数据》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-05-29 09:10:59

















    

    
        
            
            
                
                
            

            
                乔父系_377            

            
                这个家伙很懒，什么也没留下！            


        
    

    
    

    
    

    
        Tags | 热门标签
        
            
                                
                    command
                
                                
                    blob
                
                                
                    go
                
                                
                    dockerfile
                
                                
                    bitmap
                
                                
                    python
                
                                
                    search
                
                                
                    default
                
                                
                    shell
                
                                
                    iostream
                
                                
                    netty
                
                                
                    hash
                
                                
                    tags
                
                                
                    httpclient
                
                                
                    actionscrip
                
                                
                    dll
                
                                
                    require
                
                                
                    timestamp
                
                                
                    controller
                
                                
                    copy
                
                                
                    get
                
                                
                    int
                
                                
                    cmd
                
                                
                    header
                
                                
                    import
                
                                
                    cookie
                
                                
                    filter
                
                                
                    testing
                
                                
                    hashtable
                
                                
                    buffer
                
                                
            
        
    

    
    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1Android TextView实现点击显示全文与隐藏功能（附源码）
                
                                
                    2Android ViewPager循环播放广告实例详解
                
                                
                    3巧用ViewPager实现驾考宝典做题翻页效果
                
                                
                    4android ViewPager实现滑动翻页效果实例代码
                
                                
                    5Android 模仿QQ侧滑删除ListView功能示例
                
                                
                    6Android操作Excel文件的功能实现
                
                                
                    7Android中使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作
                
                                
                    8详解android6.0版本下悬浮窗实现
                
                                
                    9Android内存泄漏排查利器LeakCanary
                
                                
                    10Android Studio如何修改字体的大小
                
                                
                    11Android 打开网络上pdf文件
                
                                
                    12Android中使用Notification实现状态栏的通知
                
                                
                    13Android 开发中线程的分析
                
                                
                    14Android TimePicker 直接输入的问题解决方案
                
                                
                    15Android实现每天定时提醒功能