饼状图/条形图（前端页面的展示以及后台代码）

最新推荐文章于 2025-06-14 01:00:00 发布

江江同学啊

最新推荐文章于 2025-06-14 01:00:00 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA 文章标签： Jquery 饼状图.html 条形图.html

本文链接：https://blog.youkuaiyun.com/qq_36330733/article/details/89457105

本文介绍了如何使用JQuery和jqPlot库在前端页面上展示饼状图和条形图。文章展示了piecharts.html和barcharts.html的代码，并提到了必要的插件引用。此外，还提供了 pieservlet 和 barservlet 的后台代码示例，以及相关的DAO层和数据库连接信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先展示一下运行结果

在写这个之前首先需要几个插件

piecharts.html页面代码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.min.css" />
<script type="text/javascript">
$().ready(function () {
	$.getJSON("testpie.do",function(data){
		
		   var plot1 = $.jqplot('testpie', [data], {
		        gridPadding: {top:0, bottom:38, left:0, right:0},
		        seriesDefaults:{
		            renderer:$.jqplot.PieRenderer, 
		            trendline:{ show:false }, 
		            rendererOptions: { padding: 8, showDataLabels: true }
		        },
		        legend:{
		            show:true, 
		            placement: 'outside', 
		            rendererOptions: {
		                numberRows: 1
		            }, 
		            location:'s',
		            marginTop: '15px'
		        }       
		    });
	});
});
</script>
</head>
<body>

     <div id="testpie" style="width:500px;height:300px;"></div>

</body>
</