d3.js——饼状图

        由于个人需求是须要有图例，因此pie图的建立用的是封装好的pie图制做工具生成的，图例是本身添加的，之后我会写一篇用代码写出pie图的文章，敬请期待。

一、效果

二、html页面

 <div id="pieEquips"></div>

 

三、js

<script src="~/Scripts/d3.v3.min.js"></script> //d3.js必须引用的
<script src="~/Scripts/d3/d3pie.js"></script>  //官网上封装好的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; });

}