下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript"src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
<script type="text/javascript">
$(function(){
var data = [
{ label: "苹果",data: 10},{ label: "香蕉",data: 30},{ label: "西瓜",data: 90},{ label: "葡萄",data: 70},{ label: "柑橘",data: 80},{ label: "菠萝",data: 110}
];
$.plot($("#pie1"),data,{
series: {
pie: {
show: true //显示饼图
}
},legend: {
show: false //不显示图例
}
});
$.plot($("#pie2"),{
series: {
pie: {
show: true //显示饼图
}
}
});
$.plot($("#pie3"),{
series: {
pie: {
show: true,radius: 1,//半径
label: {
show: true,radius: 2/3,formatter: function(label,series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},threshold: 0.03 //这个值小于0.03，也就是3%时，label就会隐藏
}
}
},legend: {
show: false
}
});
$.plot($("#pie4"),{
series: {
pie: {
show: true
}
},grid: {
hoverable: true,clickable: true
}
});
$("#pie4").bind("plothover",pieHover);
$("#pie4").bind("plotclick",pieClick);
});
function pieHover(event,pos,obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
}
function pieClick(event,obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
alert(''+obj.series.label+': '+percent+'%');
}
</script>
<style>
div.graph
{
width: 400px;
height: 300px;
border: 1px dashed gainsboro;
}
</style>
</head>
<body>
<h3>饼图1</h3>
<div id="pie1" class="graph" ></div>
<hr>
<h3>饼图2</h3>
<div id="pie2" class="graph" ></div>
<hr>
<h3>饼图3</h3>
<div id="pie3" class="graph" ></div>
<hr>
<h3>饼图4</h3>
<div id="pie4" class="graph" ></div>
<div id="hover"></div>
<hr>
</body>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
