`

jqplot demo

阅读更多 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jqplot</title>
	
	<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.jqplot.js"></script>
	<script class="include" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
   <script class="include" type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
   <script class="include" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script> 
   <script class="include" type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>

	<!-- <script type="text/javascript" src="js/jqplot.barRenderer.js"></script> -->
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
	
	<script>
		$(document).ready(function(){
			$.jqplot('chartdiv',[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],{
				//标题
				title : {text:'options - title',show :true},
				//textColor : 'red',
				//(series data)数列数据默认设置(不显示marker - 坐标点标记)
				seriesDefaults:{
					show:true,
					showMarker : true, //是否强调显示图中的数据节点 
					showLine: true,     //是否显示图表中的折线（折线图中的折线）
					 markerOptions: {    
						show: true,
					},
					 pointLabels: {  //数据点文本设置,需要页面引用jqplot.pointLabels.js  
						show: true,  //是否固定显示数值  
						formatString: "%.1f",  //格式  
						location: "s"   //位置  
            }

					},
				//边框
				grid : {
					shadow:true,
					borderWidth:2,
					backgroundColor: "transparent" ,
					background:'rgba(0,0,0,0) !important',//火狐下div背景透明
                     filter:'alpha(opacity=0)'//ie下实现div背景透明
					},
				//默认坐标轴设置
				axesDefaults:{
							tickOptions:{
								 mark: 'outside',
								 showMark: true, 
								 showGridline: true,
								 markSize: 10,
								 show:true,
								 showLabel:true,
							}
							},
				//各个坐标轴
				
				axes:{
					//yaxis:{min:0, max:250,ticks:[0,50,100,150,200,250] },
					//xaxis:{min:0, max:15,ticks:[0,2,4,6,8,10,12,14]}
					//放大缩小不能指定固定的值
					yaxis:{min:0, max:250 },
					xaxis:{min:0, max:15}
				}, 
			cursor: {
                show: true,
                zoom: true,
                looseZoom: true,
                showTooltip: false
            },
				highlighter: {
					show: true, 
					showLabel: true, 
					showTooltip: true,  
					tooltipAxes: 'y',
					sizeAdjust: 7.5 , tooltipLocation : 'ne'
            }
			});
		});
	</script>
	
</head>
<body>
	
	<div id="chartdiv" style="height:500;width:500px;"></div>

</body>
</html>
分享到：
| oracle 连接 中的 ON 和WHERE
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics