使用 d3.js 制作饼图

Making pie charts using d3.js?

本文关键字：d3 js 使用      更新时间：2023-09-26

我正在使用MySQL和PHP作为后端。有没有一个例子来说明 d3.js 与 php 和 MySQL 的用法。

这就是

我为静态数据绘制饼图的方式。您可以在.js文件中提取脚本并使用动态数据。

<html>
<head>
    <title>
        Pie chart
    </title>
<script type="text/javascript" src='d3.v3.min.js' charset='utf-8' ></script>
</head>
    <body>
        <script type="text/javascript">
            var metadata = {
                'x' : 'name' ,
                'y' : 'percent' };
            var data = [
                {label : 'name1', value : 25},
                {label : 'name2', value : 20},
                {label : 'name3', value : 40},
                {label : 'name4', value : 15} ];
            var width = 1100 , height = 650 , radius = 250 ,
            color = ["#C5AAF5","#FB7374","#A3CBF1","#79BFA1","#F5A352","#94B3C8", "#F9D08B","#B2AC4E","#64BD4F","#C09372"];
            var colorDescriptions = [];
            var svgContainer = d3.select("body") // create svg container
                .append("svg:svg")
                .data([data])
                .attr("width", width)
                .attr("height", height)
                .append("svg:g")
                .attr("transform", "translate(" + 300 + "," + 300 + ")") ;;
            var arc = d3.svg.arc() // draw arc of given radius
                .outerRadius(radius);
            var pie = d3.layout.pie() // assign data for pie chart
                .value(function(d) { return d.value; });
            var arcs = svgContainer.selectAll("g.slice") // slice the circle
                .data(pie)   
                .enter()
                .append("svg:g")
                .attr("class", "slice");
            arcs.append("svg:path") // fill color in each slice
                .attr("fill", function(d, i) { 
                var colorSelected =  color[i];
                colorDescriptions.push({"colorSelected": colorSelected, "label": data[i].label});
                return colorSelected; } )
                .attr("d", arc)
            arcs.append("svg:text") // write slice information values
                .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = radius;
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d, i) { return data[i].value; })
                .style("font-family","monospace")
                .style("fill", "#3f3f3f")
                .style("font-size", "20px");
            descriptionText = "Pie Chart of " + metadata.x + " with " + metadata.y; // pie chart description
            var description = svgContainer.append("g").attr("class", "description"); // pie chart description
            var desc_label = description.append("text")
                .attr("class", "description")
                .attr("y", 300)
                .attr("x", 000)
                .text(descriptionText)
                .style("font-weight", "bold")
                .style("font-size", "20px")
                .style("text-anchor", "middle"); 
            var pieChartLabels = svgContainer.append("g").attr("id","pie-chart-labels");   //index for pie chart : name
            pieChartLabels.selectAll("text").data(colorDescriptions).enter().append("svg:text")
                .text(function(d) { return d.label; } ).attr("x",440)
                .attr("y",function(d, i) { return 14 + i*30; })
                .style("font-size", "20px");
            var pieChartLabelsColors = svgContainer.append("g").attr("id","pie-chart-labels-colors"); 
            pieChartLabelsColors.selectAll("rect").data(colorDescriptions).enter().append("rect") 
                .attr("x",400)
                .attr("y",function(d, i) { return i*30; })
                .attr("width", 25)
                .attr("height", 15)
                .style("fill" , function(d) { return d.colorSelected; }); //index for pie chart : color
        </script>
    </body>
</html>
相关文章：