d3.js绘制饼状图

复制代码
<!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>
View Code
复制代码

posted @   百事没事  阅读(368)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示