不用库js饼图
当然可以，以下是一个不使用库的简单饼图生成方法的示例：，，``html，，，，，Pie Chart，， .pie {， position: relative;， width: 200px;， height: 200px;， border-radius: 50%;， }， .slice {， position: absolute;， width: 50%;， height: 50%;， transform-origin: right bottom;， }，，，，，，，，，，，，`，，这个代码创建了一个简单的HTML页面，其中包含一个基本的饼图，由四个扇区组成，每个扇区代表不同的颜色。通过调整 .slice 元素的 transform` 属性，可以改变每个扇区的大小和位置。
在不使用任何库的情况下，用纯JavaScript来绘制饼图需要一些基础的HTML和CSS知识，以下是一个简单的示例，展示了如何使用原生JavaScript、HTML5的<canvas>元素以及一些基本的数学计算来绘制一个饼图。
HTML部分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pie Chart with Pure JavaScript</title> <style> canvas { border: 1px solid #ccc; } </style></head><body> <canvas id="pieChart" width="400" height="400"></canvas> <script src="piechart.js"></script></body></html>JavaScript部分（保存为piechart.js）
document.addEventListener('DOMContentLoaded', function() { const data = [ { value: 30, color: '#FF6384' }, { value: 70, color: '#36A2EB' } ]; const canvas = document.getElementById('pieChart'); const ctx = canvas.getContext('2d'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = Math.min(centerX, centerY) 20; // 留边距 let startAngle = 0; data.forEach((slice, index) => { const endAngle = startAngle + (slice.value / 100) * 2 * Math.PI; ctx.fillStyle = slice.color; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, startAngle, endAngle); ctx.closePath(); ctx.fill(); startAngle = endAngle; });});解释
1、HTML部分：创建一个<canvas>元素用于绘图，并引入外部的JavaScript文件。
2、CSS部分：简单的样式设置，给<canvas>元素添加边框。
3、JavaScript部分：
定义数据，每个对象包含value（百分比）和color（颜色）。
获取<canvas>元素及其上下文。
计算画布中心和半径。
遍历数据，计算每个扇形的起始角度和结束角度，并绘制扇形。
FAQs
Q1: 如何修改饼图的数据和颜色？
A1: 在JavaScript部分，找到定义数据的数组，修改其中的value和color属性即可，将第一个扇形的值改为50，颜色改为红色，可以这样写：
const data = [ { value: 50, color: '#FF0000' }, // 修改这里 { value: 50, color: '#36A2EB' }];Q2: 如何使饼图响应式，即在不同屏幕尺寸下自动调整大小？
A2: 可以通过CSS媒体查询来动态调整<canvas>的大小。
@media (max-width: 600px) { canvas { width: 100%; height: auto; }}这段代码会在屏幕宽度小于600px时，使<canvas>元素的宽度占满父容器，高度根据宽度自动调整，需要在JavaScript中重新计算中心点和半径，以确保饼图正确绘制。
小编有话说
使用纯JavaScript绘制饼图虽然不像使用图表库那样方便，但它提供了更大的灵活性和自定义空间，通过理解基本的绘图原理和数学计算，你可以创建出各种复杂而美观的数据可视化效果，希望这个示例能帮助你入门，并激发你进一步探索JavaScript绘图的兴趣！
小伙伴们，上文介绍了“不用库js饼图”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
相关阅读
-
win10怎么快速关闭屏幕？win10快速关闭屏幕方法
估计很多用 Win10 的人都会想要快速锁屏来保护个人隐私，但是也有人不知道怎么快速关掉屏幕。其实很简单，你可以直接按 Win + L 快捷键，或者右键点击桌面上的空白地方，然后选择快捷方式就可以啦。下面我们就来详细说一下 Win10 快速
-
苹果iOS 17.4 Beta版开放侧载功能，但iPad不在列
1月27日消息，苹果公司近日针对欧盟《数字市场法》作出了响应，上线了iOS 17.4 Beta版，向欧盟用户开放了侧载功能。然而，尽管iPadOS与iOS在本质上并无太大差异，但iPad并不支持侧载功能。这意味着，安装第三方应用商店以及从第
-
Win11系统intel核显控制面板怎么打开-打开intel核显控制面板的方法
你晓得吗？有些小伙伴想开自己电脑的intel核显控制面板来看显卡驱动信息。里面可以检查更新驱动。但是，他们不知道怎么开这个面板。如果也想试试看的话，可以看看下面的操作方法哦！打开intel核显控制面板的方法1. 右键桌面空白处，就能打开英特
-
极氪20万台新能源汽车里程碑达成
1月8日消息，国内新能源汽车市场再传捷报。极氪汽车今日欣喜公布，经过26个月的不懈努力，其累计交付汽车数量已突破20万台大关。这一成就不仅彰显了极氪在新能源领域的强劲实力，更使其持续刷新着新势力品牌的最快交付纪录，同时保持着全球唯一的新能源
-
Windows10玩GTA5闪退怎么解决？Windows10玩GTA5闪退解决方法
Windows10玩GTA5闪退怎么解决？GTA5是一款非常知名的游戏，很多的玩家都在畅玩，但是很多的用户们在玩耍这一款游戏的时候，遇到了自己电脑玩GTA5会闪退，这个问题我们怎么解决呢？下面小编为大家带来详细的解决方法介绍，快来看看吧！
-
极氪第二款MPV车型“CM2E”谍照曝光，或于2024年上半年亮相
1月17日消息，近日，知名汽车博主@SugarDesign在社交媒体上发布了极氪品牌旗下第二款MPV车型——内部代号“CM2E”的谍照。据推测，新车可能为小型MPV，有望于2024年上半年与大家正式见面。 从曝光的谍照中可以看出，极氪CM