【css】SVG实现饼图

最新推荐文章于 2024-08-07 21:37:33 发布
最新推荐文章于 2024-08-07 21:37:33 发布
阅读量1.3k 收藏 7
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/108563453
版权
  • svg
    • viewBox(minX,minY,width,height)
      指定矩形区域，以自适应容器大小。
  • circle
    • (cx,cy)
      圆心坐标
    • r
      圆半径
    • fill
      填充色
    • stroke
      描边
    • stroke-width
      描边宽度。
      fill区域的径向宽度。
      它的宽度分布在两个区域：fill区域内和fill区域外，且各占一半，即(stroke-width)/2。
    • dasharray
      以虚线的形式将描边分成多段。
      dasharray:20 10的意思是，每段的宽度是20，段与段之间的间隔是10。
  • title
    每个svg都可以提供一个title描述性字符串，该描述只能是纯文本。
    但title的内容不会成为svg绘图的一部分，说白了，在界面上看不到。
    通常title元素必须是其父元素的第一个子元素。
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="50" fill="lightskyblue"></circle>
    </svg>
</body>

在这里插入图片描述

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="50" fill="lightskyblue"></circle>
    </svg>
    <br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="50" fill="lightskyblue" stroke="lightseagreen" stroke-width="20"></circle>
    </svg>
</body>

在这里插入图片描述
这里的stroke-width设置为 20，
于是海洋绿色的描边在fill区域内占用了10，蓝色圆可视区域因此也变小了；
海洋绿色的描边在fill区域外也占用了10，但由于svg的尺寸就是100*100，所以该尺寸外的区域被截，所以正如我们所见，fill区域外有部分圆弧。
那我们就把圆半径设置得小一点儿，比如30，这样描边区域就不会超出100*100这么个尺寸范围。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue"></circle>
    </svg>
    <br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" stroke="lightseagreen" stroke-width="20"></circle>
    </svg>
</body>

svg{
    border: 1px solid lightgray;
}

在这里插入图片描述

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="20"
                ></circle>
    </svg><br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="20"
                stroke-dasharray="20 10"
                ></circle>
    </svg><br/><br/>
</body>

svg{
    border: 1px solid lightgray;
}

在这里插入图片描述
当前circle的半径r是30，要想让描边恰好完全覆盖fill区域，那么描边宽度stroke-width就应该等于30*2=60。
将stroke-width设置为60后，svg的尺寸100*100容不下，于是扩大svg尺寸至120*120，同时重新设置圆心坐标为(60,60)。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="20"
                ></circle>
    </svg><br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="20"
                stroke-dasharray="20 10"
                ></circle>
    </svg><br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" >
        <circle cx="50" cy="50" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 10"
                ></circle>
    </svg><br/><br/>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" >
        <circle cx="60" cy="60" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 10"
                ></circle>
    </svg>
</body>

svg{
    border: 1px solid lightgray;
}

在这里插入图片描述
stroke-dasharray可设置各分段长度和分段间隔，如果分段间隔大于或等于circle周长，那么将有且只有一个分段。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" >
        <circle cx="60" cy="60" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 189"
                ></circle>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
        <circle cx="60" cy="60" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 189"
                ></circle>
    </svg>
</body>

svg:nth-of-type(2){
    background-color: lightskyblue;
    border-radius: 50%;
}

在这里插入图片描述
将上面的第二个图逆时针旋转90deg，就可以得到我们预期的饼图了。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
        <circle cx="60" cy="60" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 189"
                ></circle>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
        <circle cx="60" cy="60" r="30" fill="lightskyblue" 
                stroke="lightseagreen" 
                stroke-width="60"
                stroke-dasharray="20 189"
                ></circle>
    </svg>
</body>

svg:nth-of-type(1){
    background-color: lightskyblue;
    border-radius: 50%;
}
svg:nth-of-type(2){
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}

在这里插入图片描述

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
        <circle cx="60" cy="60" r="30"></circle>
    </svg>
</body>

svg{
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}
circle{
    fill: lightskyblue;
    stroke: lightseagreen;
    stroke-width: 60;
    stroke-dasharray: 0 189;
    animation: fillup 10s linear infinite;
}
@keyframes fillup{
    to{
        stroke-dasharray:189 189;
    }
}

在这里插入图片描述
如果circle周长是100就好了，这样百分比就好算了。
恩，r=100/(2*3.14)，约16。

<body>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="16"></circle>
        </svg>
    </div>
</body>

svg{
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}
circle{
    fill: lightskyblue;
    stroke: lightseagreen;
    stroke-width: 32;
    stroke-dasharray: 60 100;
}
.pie{
    width: 100px;
    height: 100px;
}

在这里插入图片描述

<body>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <title>20%</title>
            <circle cx="16" cy="16" r="16"
                stroke-dasharray="20 100"
            ></circle>
        </svg>
    </div>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <title>60%</title>
            <circle cx="16" cy="16" r="16"
                stroke-dasharray="60 100"
            ></circle>
        </svg>
    </div>
</body>

svg{
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}
circle{
    fill: lightskyblue;
    stroke: lightseagreen;
    stroke-width: 32;
}
.pie{
    width: 100px;
    height: 100px;
}

在这里插入图片描述
用js脚本生成以上内容。

<body>
    <div class="pie">20%</div>
    <div class="pie">60%</div>
    <script>
    document.querySelectorAll(".pie").forEach(function(pie){
        var p = parseFloat(pie.textContent);
        var NS = "http://www.w3.org/2000/svg";
        var svg = document.createElementNS(NS,"svg");
        svg.setAttribute("viewBox","0 0 32 32");

        var title = document.createElementNS(NS,"title");
        title.textContent = pie.textContent;
        pie.textContent = "";
        svg.appendChild(title);

        var circle = document.createElementNS(NS,"circle");
        circle.setAttribute("cx",16);
        circle.setAttribute("cy",16);
        circle.setAttribute("r",16);
        circle.setAttribute("stroke-dasharray",p+" 100");
        svg.appendChild(circle);
        
        pie.appendChild(svg);

    })
    </script>
</body>

 svg{
     background-color: lightskyblue;
     border-radius: 50%;
     transform:rotate(-90deg);
 }
 circle{
     fill: lightskyblue;
     stroke: lightseagreen;
     stroke-width: 32;
 }
 .pie{
     width: 100px;
     height: 100px;
 }

使用stroke-dashoffset制作两种以上颜色的饼图。

<body>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
            <circle cx="16" cy="16" r="16" stroke-dasharray="20 100" fill="lightskyblue" stroke="lightseagreen"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="40 100" stroke-dashoffset="-20" fill="transparent" stroke="lightgoldenrodyellow"></circle>
        </svg>
    </div>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
            <circle cx="16" cy="16" r="16" stroke-dasharray="20 100" fill="lightskyblue" stroke="lightseagreen"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="40 100" stroke-dashoffset="-20" fill="transparent" stroke="lightgoldenrodyellow"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="10 100" stroke-dashoffset="-60" fill="transparent" stroke="gold"></circle>
        </svg>
    </div>
    <div class="pie">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"  >
            <circle cx="16" cy="16" r="16" stroke-dasharray="20 100" fill="lightskyblue" stroke="lightseagreen"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="40 100" stroke-dashoffset="-20" fill="transparent" stroke="lightgoldenrodyellow"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="10 100" stroke-dashoffset="-60" fill="transparent" stroke="gold"></circle>
            <circle cx="16" cy="16" r="16" stroke-dasharray="10 100" stroke-dashoffset="-70" fill="transparent" stroke="orange"></circle>
        </svg>
    </div>
</body>

svg{
    background-color: lightskyblue;
    border-radius: 50%;
    transform:rotate(-90deg);
}
circle{
    stroke-width: 32;
}
.pie{
    width: 100px;
    height: 100px;
}

在这里插入图片描述

richest_qi
关注
专栏目录
使用svg画饼状图（进阶版）
weixin_44283571的博客
03-31 798
1.效果图 2.代码 <template> <div class="bg"> <div class="pie" /> </div> </template> <script> export default { data() { return {} }, computed: {}, mounted() { this.getsvg() }, methods: { getsv
利用svg画饼状图（基础版）
weixin_44283571的博客
03-31 394
1.效果图 2.代码 html <template> <div class="bg"> <svg viewBox="0 0 64 64"> <circle r="16" cx="32" cy="32" /> </svg> </div> </template> css <style lang="scss" scoped> .bg{ width: 60%; height
svg绘制饼图
10-21
采用svg、json、js实现饼图的绘制
HTML5 SVG，一篇文章就够了（超全超详细，附代码演示）
最新发布
懒羊羊大王的博客
08-07 1849
SVG，全称为Scalable Vector Graphics（可缩放矢量图形），是一种基于XML的矢量图形格式。它被设计用来不受分辨率限制地描述二维图形，能够在任何尺寸下都保持清晰，是现代网页设计和图形应用中不可或缺的一部分。 SVG 与 Canvas 的区别：SVG 基于 XML 而 Cnavas 基于 JavaScript……
SVG绘制饼状图
weixin_34041003的博客
10-15 450
SVG绘制饼状图昨天学习了基本的SVG，下面是使用SVG绘制饼状图 创建SVG空间 创建SVG 需要一个document.createElementNS()方法 一个一个setAttribute()方法 编写如下js，将会创建一个svg空间 // 创建一个XML命名空间 var svgns = "http://www.w...
SVG|JS实现饼图
06-06
使用SVG弄的一个饼图PIE，只在于学习，可以参考下！
RGraph : svg : 饼图
belldeep的专栏
09-23 361
www.rgraph.net 下载 RGraph.minified-2018-08-14.zip 解压后，将目录 libraries 简化为: lib 饼图例子: RGraph/svg_pie1.html [code="html"] RGraph : SVG Pie charts API var...
使用svg来写一个饼图
gorliya的博客
06-12 301
title 1234 使用svg来写一个饼图
[css] 用css实现饼图效果
歌谣的博客
02-09 397
[css] 用css实现饼图效果 方法一、使用伪元素 + transform + css渐变实现 .pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%,
Angular15组件实现基于svg的饼图
08-10
通过查看和学习这个项目，你可以更深入地理解如何在Angular 1.5中实现SVG饼图组件，并且可以将其作为模板，为其他可视化需求创建更多的组件。记住，实践是学习的最佳途径，尝试修改和优化这个组件，以适应你的特定...
svg绘制pie元饼图练习
weixin_41993525的博客
01-25 458
svg绘制pie饼图 let arr=[300,200,100,240]; let color=["red","#41e","blue"]; let labels=["1","2","3","4"]; let pieData = pieChart(arr,300,300,120,120,80,color,labels,200,100); console.log(pieData); document.getElementById("svg").appendChild(pieData); functi
用SVG实现的统计饼图
06-21
用svg实现的饼图,不是原创,但是对需要的人有用. 里面有3个文件,一个jsp(嵌入了pie.svg和pie.js),jsp也可以用html代替,不过一样要加入svg和js的引入.
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标
10-12
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标
HTML5 SVG饼状图形进度条代码.zip
07-03
HTML5 SVG饼状图形进度条代码是一款基于jQuery HTML5实现的可以在页面中渲染出带动画效果的SVG饼状图形，适合用于制作进度显示，加载进度等。
jQuery+HTML5 SVG饼状图形进度条动画特效
06-11
这是一款基于jQuery+HTML5实现的可以在页面中渲染出带动画效果的SVG饼状图形，适合用于制作进度显示，加载进度等饼状图形进度条特效。
svg实现树状图
06-13
网络资源拿出来与大SVG是目前最火热的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，它是基于XML，由W3C联盟进行开发。SVG可以实现无损缩放，在性能上要比其它格式的图片更好家共享
用CSS和SVG制作饼图
starsliu
08-12 2077
原文出处： lulux的博客   欢迎分享原创到伯乐头条 在涉及到CSS技术时，没有人会比Lea Verou更执着、但是又足够聪明，努力去找寻问题的各种解决方案。最近，Lea自己撰写、设计和出版了一本书——CSS Secrets，这本书非常有趣，包括一些CSS小技巧以及解决常见问题的技术。如果你觉得自己的CSS技术还不错，看看这本书，你会吃惊的。在这篇文章中，我们发布了书里的一些片段
【应用】SVG饼状图
weixin_30703911的博客
04-26 89
<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, [...
HTML5+javascript用svg画饼图
mrtuzi的专栏
07-29 669
代码】HTML5+javascript用svg画饼图。
使用D3.js实现3D饼图
03-31
但我可以为您提供D3.js实现3D饼图的基本步骤： 1. 导入D3.js库，并创建SVG容器。 2.定义饼图的数据，包括每个分片的名称、值和颜色。 3.创建一个饼图生成器，用于将数据转换为饼图。 4.使用饼图生成器创建路径...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值