<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div id="container"></div>
</body>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/d3.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
});
var color = d3.scale.category10();
//生成随机颜色
var dataset = [5, 10, 20, 45, 6, 25];
var pie = d3.layout.pie();
//饼图布局 https://github.com/mbostock/d3/wiki/Pie-Layout
var w = 1000;
var h = 1000;
var outerRadius = w / 2;
//外半径
var innerRadius = 0;
//内半径
var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
var arcs = svg.selectAll("g.arc").data(pie(dataset)).enter().append("g").attr("class", "arc").attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
arcs.append("path").attr("fill", function(d, i) {
return color(i);
}).attr("d", arc);
arcs.append("text").attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
//定位文字到图形的中心
}).attr("text-anchor", "middle")//文字居中
.text(function(d) {
return d.value;
})
</script>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现