flotcharts 饼状图插件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.demo-placeholder{
width:500px;
height:500px;
magrin:auto;
}
style>
<title>Documenttitle>
head>
<body>
<div id="placeholder" class="demo-placeholder">div>
<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 = [],
series = Math.floor(Math.random() * 6) + 3;
for (var i = 0; i < series; i++) {
data[i] = {
label: "Series" + (i + 1),
data: Math.floor(Math.random() * 100) + 1
}
}
var data = [
{ label: "Series1", data: 10},
{ label: "Series2", data: 30},
{ label: "Series3", data: 90},
{ label: "Series4", data: 70},
{ label: "Series5", data: 80},
{ label: "Series6", data: 20}
];
var data = [
{ label: "苹果", data: [[1,10]]},
{ label: "香蕉", data: [[1,30]]},
{ label: "橘子", data: [[1,90]]},
{ label: "梨", data: [[1,70]]},
{ label: "核桃", data: [[1,80]]},
{ label: "其他", data: [[1,20]]}
];
$.plot($("#placeholder"), data, {
series: {
pie: {
show: true,
radius:0.8, //设置原形的半径，0-1是按比例，大于这是像素
innerRadius:0.2, //设置空心圆的半径
startAngle:0, //设置起始的角度
tilt:0.8, //圆的倾斜角度，会变成椭圆形
shadow:{ //设置阴影，只有在tilt不为1是有效果
top:-5,
left:-5,
alpha:0.2
},
offset:{ //设置圆形图的偏移量，上下左右
top:0,
left:0
},
stroke:{ //设置边界和片之间的颜色和宽度
color:"#00FF00",
width:5
},
label:{ //设置提示标签
show:true,
radius:0.8, //标签距离圆心的距离百分比
threshold:0.01, //设置现在标签的最小百分比，小于他则不显示
formatter:function labelFormatter(label, series) { //设置标签的内容
return "" + label + "
" + Math.round(series.percent) + "%";
},
background: { //设置标签的背景颜色
//color:"#aa0000",
opacity: 0.8 //透明度
}
},
combine:{ //把小于指定比例的合并为一片，
color:"#999",
threshold:0.09,
label:"其他所有"
},
highlight:{
opacity:0.5
}
}
},
grid: { //设置事件
hoverable: true,
clickable: true
},
legend: {
show: false
}
});
//设置事件
$("#placeholder").bind("plothover", function(event, pos, obj) {
if (!obj) {return;}
var percent = parseFloat(obj.series.percent).toFixed(2);
console.log($("#hover"));
$("#hover").html("" + obj.series.label+"你还送发送是父" + " (" + percent + "%)");
});
$("#placeholder").bind("plotclick", function(event, pos, obj) {
if (!obj) {
return;
}
percent = parseFloat(obj.series.percent).toFixed(2);
alert("" + obj.series.label + ": " + percent + "%");
});
})
script>
body>
html>