d3.js——饼状图
因为我的需求是需要有图例，所以pie图的创建用的是封装好的pie图制作工具生成的，图例是自己添加的，以后我会写一篇用代码写出pie图的文章，敬请期待。
1、效果
2、html页面
<div id="pieEquips"></div>
3、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; });
}
4、福利时间
