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; });

}