d3.js 画环形图和饼状图

最新推荐文章于 2023-05-08 13:54:37 发布

原创

最新推荐文章于 2023-05-08 13:54:37 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何利用d3.js库中的pie生成器和arc弧来绘制环形图和饼状图。通过链接提供的d3-shape README文档，读者可以学习到详细的步骤和代码示例，从而实现数据可视化的动态效果。

利用d3.js中的pie生成器，加上arc弧

https://github.com/d3/d3-shape/blob/v1.3.4/README.md#pies

效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>d3 pie</title>

</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
var color=[
"POWDERBLUE","AQUAMARINE","LIMEGREEN","SEASHELL","MEDIUMPURPLE","LIGHTGOLDENRODYELLOW","LAVENDERBLUSH","skyblue"];

var svg=d3.select("#chart")
	.append("svg")
	.attr("wi