使用jQuery插件Flot,绘制饼图

<script src="jquery-1.7.2.min.js"></script>
<script src="flot/jquery.flot.min.js"></script>
<script src="flot/jquery.flot.pie.min.js"></script>

<style>
#interactive-pie-chart{ width:500px; height:500px;}
</style>

<div id="interactive-pie-chart"></div>

<script>
$(function(){
	handleInteractivePieChart();
})

function handleInteractivePieChart() 
{
	if ($('#interactive-pie-chart').length !== 0) {
		var data = [];
		var series = 3;
		var colorArray = ["#f59c1a", "#575d63", "#b6c2c9"];
		for( var i = 0; i < series; i++) {
			data[i] = { label: 'Series'+(i+1), data: Math.floor(Math.random()*100)+1, color: colorArray[i]};
		}
		$.plot($('#interactive-pie-chart'), data, {
			series: {
				pie: { 
					show: true,
					label: {
                      show: true,
                      radius: 2/3,
                      formatter: function(label, series){
                          return '<div style="font-size:5pt;text-align:center;padding:2px;color:black;">'
                          +Math.round(series.percent)+'%</div>';
					  },
					}
				}
			},
			grid: {
				hoverable: true,
				clickable: false,
				legend: {
					  show: true,
				}
			}
		});
		// 设置事件  plot+hover
		$('#interactive-pie-chart').bind('plothover', function(event, pos, obj) {
			if (!obj) {
				return;
			}
			var percent = parseFloat(obj.series.percent).toFixed(2);
		});
	}
}
</script>