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

最新推荐文章于 2024-05-17 03:34:12 发布

江江同学啊

最新推荐文章于 2024-05-17 03:34:12 发布

阅读量2.9k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_36330733/article/details/89457105

版权

首先展示一下运行结果

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

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="test

最低0.47元/天解锁文章

江江同学啊

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
饼状图/条形图（前端页面的展示以及后台代码）

首先展示一下运行结果在写这个之前首先需要几个插件<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script><...
复制链接

扫一扫

专栏目录