本文介绍了如何使用jQuery和相关插件绘制统计饼图，包括饼图的基本配置、颜色设置、数据标签显示以及不同浏览器的兼容性处理。
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<link href="jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.js" type="text/javascript"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function(){
var data = [['苹果', 20],['香蕉', 24],['雪梨', 16],['橘子', 28],['葡萄', 7],['荔枝', 5]];
var pie = $.jqplot('chart2', [data], {
title: '统计饼图',
seriesColors: [ "#579575", "#d8b83f", "#ff5800", "#0085cc","#4bb2c5", "#c5b47f", "#EAA228"],
series:[{
renderer: $.jqplot.PieRenderer,
rendererOptions: {
diameter: 250,//饼图的直径
sliceMargin: 1,//饼的每个部分之间的距离
showDataLabels: true,
dataLabelNudge: 35,
lineWidth: 5 //设置 饼 块的边框宽度
}
}],
legend: {
show: true
}
});
});
</script>
<body>
<div id="chart2" style="height:340px; width:500px;"></div>
</body>
<link href="jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.js" type="text/javascript"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(document).ready(function(){
var data = [['苹果', 20],['香蕉', 24],['雪梨', 16],['橘子', 28],['葡萄', 7],['荔枝', 5]];
var pie = $.jqplot('chart2', [data], {
title: '统计饼图',
seriesColors: [ "#579575", "#d8b83f", "#ff5800", "#0085cc","#4bb2c5", "#c5b47f", "#EAA228"],
series:[{
renderer: $.jqplot.PieRenderer,
rendererOptions: {
diameter: 250,//饼图的直径
sliceMargin: 1,//饼的每个部分之间的距离
showDataLabels: true,
dataLabelNudge: 35,
lineWidth: 5 //设置 饼 块的边框宽度
}
}],
legend: {
show: true
}
});
});
</script>
<body>
<div id="chart2" style="height:340px; width:500px;"></div>
</body>
扫一扫
4510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
