如何使用纯css制作扇形图，合并起来形成饼图

Posted 2023-05-04

使用纯css制作扇形图，合并起来形成饼图：

应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图

html：<div id="circle">11</div>

css：

#circle

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

效果：

4.同样我们对其中三个边框设置透明色即可得到扇形

html：<div id="fan">11</div>

css:

#fan

width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color:red transparent transparent transparent;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;

效果：

参考技术A 创建一个空白的html文件
添加Div，DIV设定在页面中的位置。本示例展示一个从0度顺时针转超过180度的，一个从0度逆时针转超过180度的。由于未超过180度的，可以单纯转就可以实现，暂不介绍。
给顺时针添加样式，如下图。实现原理：使用clip属性截图最大可以截取180度的半圆形，超过180度就需要用补全的方式了。
4
给逆时针添加样式，如下图。实现原理：跟顺时针相同，稍复杂一步。需要先转出360去掉逆时针的角度。比如：225度，需要先转360-225=135度，结合起来才能实现。
5
全部实现后，如下图。（上下由于工具自动截取，原图是补全的）
6
全部的DIV要使用绝对定位position:absolute,图片的大小和截取的半径要相同。

tableau可视化函数使用案例（六十七）-Tableau饼图及其变种（环形图南丁格尔玫瑰图旭日图）

01 基本饼图

饼图常用于表达多个子类的占比，通过观察饼图扇形角度的大小，可快速对比各子类间的相对关系。在Tableau中，制作饼图比较方便，仅需依次将类别和相应度量信息拖动到标记区的颜色和大小即可。

仍然以Tableau自带的超市数据集为例，制作各地区销售额占比的饼图为：

基本饼图功能相对单一，能表达的信息也比较有限。

02 环形图

饼图的一个基本变形是环形图，是在饼图的基础上将中间镂空，以实现更为美观的效果。应用Tableau是无法直接制作环形图的，需要稍微做一点变形，其基本思路是制作两个双轴饼图并同轴显示，设置两个饼图不同的大小，然后将其中较小的饼图设置为白色，即实现了大图镂空的效果。

描述起来比较复杂，直接做个动图：

• 制作双饼图，其中一个以地区作为颜色区分，另一个默认

• 调整两饼图大小，实现大小区分，而后设置同轴，调整小饼图颜色为白色