用d3.js画饼状图

    xiaoxiao2021-03-25  102

    <html> <head> <meta charset="utf-8"> <title>饼状图</title> </head> <style> </style> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var width = 400; var height = 400; 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 piedata = pie(dataset); var outerRadius = 150; //外半径 var innerRadius = 5; //内半径,为0则中间没有空白 var arc = d3.svg.arc() //弧生成器 .innerRadius(innerRadius) //设置内半径 .outerRadius(outerRadius); //设置外半径 var color = d3.scale.category10(); var arcs = svg.selectAll("g")//g用于把相关元素进行组合的容器元素 .data(piedata) .enter() .append("g") .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); arcs.append("path") .attr("fill",function(d,i){ return color(i); }) .attr("d",function(d){ return arc(d); }); arcs.append("text") .attr("transform",function(d){ return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor","middle") .text(function(d){ return d.data; }); console.log(dataset); console.log(piedata); </script> </body> </html> 演示地址:http://runjs.cn/detail/b5xujnep

    转载请注明原文地址: https://ju.6miu.com/read-13961.html

    最新回复(0)