jQuery图表制作——jqchart的应用1

最新推荐文章于 2017-11-21 15:11:00 发布

深蓝色的忧伤

最新推荐文章于 2017-11-21 15:11:00 发布

阅读量528

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zheng12tian/article/details/40617059

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jqchart</title>
		<!--制作图像必备的canvas插件  这个是将canvas标签转换为IE认识的vml-->
		<!--[if IE]><script src="js/jqchart/excanvas-compressed.js" type="text/javascript" ></script><![endif]-->
		<script src="js/jqchart/jquery.js" type="text/javascript"></script>
		<!--jQuery图标插件-->
		<script src="js/jqchart/jquery.jqchart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery = $;
		</script>
		<script type="text/javascript">
			jQuery(document).ready(function(){
				//原始样式
				var chartSetting={data : [ [435,500,600,700,888,777,925] ]};
				jQuery('#canvasMyID5').jQchart(chartSetting);
				//个人设置样式
				var diy_chartSetting={
				   config : {
					   title : "图表说明(也就是图标的头部)",
					   titleLeft: 80,//图表头部说明距离画布最左端的距离
					   titleTop:20,//图表头部说明距离画布最上端的距离
					   labelX : ["X1","X2","X3","X4","X5","X6","X7"],
					   scaleY : {min: 0,max:1000,gap:200},
					   width: 680, //有影响
					   height: 500, //有影响
					   chartHeigth:450,
					   chartWidth:650,
					   paddingT : 50, //有影响
					   paddingR : 50, //有影响
					   paddingB : 50, //有影响
					   paddingL : 50 //有影响
				   },
				   data : [
					   [435,500,600,700,888,777,925],
					   [50,123,312,200,402,300,512],
					   [100,400,790,640,128,347,567]
				   ]
				 };
				 jQuery('#canvasMyID').jQchart(diy_chartSetting);
			});
		</script>
	</head>
	<body>
		<div style="text-align:center;color:red;font-weight:bold;">jqchart默认显示格式</div>
		<canvas id="canvasMyID5" height="400" width="680"></canvas>
		<div style="text-align:center;color:red;font-weight:bold;">jqchart自定义显示格式</div>
		<canvas id="canvasMyID" height="400" width="680"></canvas>
	</body>
</html>

jqchart.rar (28.6 KB)
下载次数: 467