d3.js——绘制饼状图

最新推荐文章于 2023-07-14 10:17:46 发布

AryaoO

最新推荐文章于 2023-07-14 10:17:46 发布

阅读量1.3k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： d3 饼状图颜色比例尺圆弧 layout

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51242573

版权

本文详细介绍了如何利用d3.js库创建饼状图，包括设置颜色比例尺和绘制圆弧的方法，展示了最终的图表效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
</head>
<body>
<script src = "d3.js"></script>
<script src = "js/bing.js"></script>
</body>
</html>

/**
 * Created by Silence_C on 2016/4/25.
 */
var width = 600,
    height = 600;
var dataset = [30,10,43,55,13];
var svg = d3.select("body").append("svg")
        .attr("width",width)
        .attr("height",height)
var pie = d3.layout.pie();

//用做弧线的方法来作饼状图，因为弧线有粗细，调整粗细就能变成饼状图
var outerRadius = width/ 2,
    innerRadius =150;
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var color = d3.scale.category10();//构造一个有10种颜色的序数比例尺

var arcs = svg.selectAll("g

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AryaoO

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
d3.js——绘制饼状图

饼状图/** * Created by Silence_C on 2016/4/25. */var width = 600, height = 600;var dataset = [30,10,43,55,13];var svg = d3.select("body").append("svg") .attr("width",width)
复制链接

扫一扫