因为我的需求是需要有图例，所以pie图的创建用的是封装好的pie图制作工具生成的，图例是自己添加的，以后我会写一篇用代码写出pie图的文章，敬请期待。

1、效果

2、html页面

3、js

    
      //d3.js必须引用的
     
        //官网上封装好的pie图的js
     
    

// 调用方法传递图数据grid.load(obj, function (result) {    if (result.total > 0) {        //grid.setData(mini.decode(result.data));        //grid.setTotalCount(result.total);        pieEquips(result.result.pieData, dimension);        pieValue(result.result.pieData, dimension);    } else {        mini.alert("没有查询到相关数据，请重新筛选！");    }}, function (e) {    mini.alert("出现错误，请重新查询！");});

//台数pie图的创建function pieEquips(data, chartName) {    $('#pieEquips').html('');    // 处理json数据    var pieData = [];    for (var i = 0; i < data.length; i++) {        pieData.push({            label: data[i].CodeName,            value: data[i].Number        });    }    // pie图配置，这个事官网上封装好的pie图制作工具生成的配置文件，有些地方需要修改    var pie = new d3pie("pieEquips", {        header: {            title: {                text: "按" + chartName + "：台数"            }        },        size: {            "canvasHeight": 400,            "canvasWidth": 500        },        data: {            content: pieData        },        labels: {            outer: {                "format": "none",            }        },        misc: {            canvasPadding: {                //top: 0,                right: 100,                //bottom: 0,                //left: 0            }        },        tooltips: {            enabled: true,            type: "placeholder",            string: "{label}: {value}台-{percentage}%",            styles: {                fadeInSpeed: 500,                backgroundColor: "#00cc99",                backgroundOpacity: 0.8,                color: "#ffffcc",                borderRadius: 4,                font: "verdana",                fontSize: 20,                padding: 20            }        }    });    // 下面的代码就是我在生成的pie图之上，获取svg整个图对象，然后添加图例和名称，其实只要    //学好d3.js的api方法，什么样的图都能画出来，当然这很难。    var temp = 30; //高度增量    var svg = d3.select("#pieEquips svg"); //获取饼图对象    // 添加legend    svg.append("g").selectAll(".legendRect")        .data(pie.options.colors).enter().append("rect")        .attr("class", "legendRect")        .attr("x", function() { return pie.options.size.canvasWidth - 100; })        .attr("y", function() { temp = temp + 20;return temp; })        .attr("width", 10)        .attr("height", 10)        .style("fill", function(d) { return d; });    // 添加legend名称    temp = 38;    svg.append("g").selectAll(".legendText")        .data(pie.options.data.content)        .enter().append("text")        .attr("class", "legendText")        .attr("x", function(d) { return pie.options.size.canvasWidth - 60; })        .attr("y", function(d) { temp = temp + 20;return temp; })        .attr("dx", ".35em")        .attr("dy", 0)        .attr("text-anchor", "middle")//默认左对齐，middle中对齐，end右对齐        .text(function(d) { return d.label; });}