JQuery flot pie chart plugin简单例子

来源：互联网发布：微商加粉软件免费下载编辑：程序博客网时间：2024/05/16 14:42

<html>
<head>
<title>饼图</title>

<script type="text/javascript" src="media/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="media/js/jquery.flot.js"></script>
<script type="text/javascript" src="media/js/jquery.flot.pie.js"></script>
</head>
<body>
<div id="pieChart" style="width: 400px; height: 300px">
</div>
</body>
<script type="text/javascript">
$(function () {

var optionPie = {
series: {
pie: {
show: true,
radius: 'auto', // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
innerRadius: 0,
startAngle: 3 / 2,
tilt: 0.8,
offset: {
top: 0,
left: 'auto'
},
stroke: {
color: '#FFF',
width: 1
},
label: {
show: true,
formatter: function (label, slice) {
return '<div style="font-size:x-small;text-align:center;padding:2px;color:' + slice.color + ';">' + label + '<br/>' + Math.round(slice.percent) + '%</div>';
}, // formatter function
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
background: {
color: null,
opacity: 0
},
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
},
combine: {
threshold: -1, // percentage at which to combine little slices into one larger slice
color: null, // color to give the new slice (auto-generated if null)
label: 'Other' // label to give the new slice
},
highlight: {
//color: '#FFF', // will add this functionality once parseColor is available
opacity: 0.5
}
}
}
};

var pieData = [
{ label: "Jan", data: [[1, 20]] },
{ label: "Feb", data: [[1, 20]] },
{ label: "March", data: [[1, 20]] }
];

$.plot($("#pieChart"), pieData, optionPie);
});
</script>

</html>

0 0