`

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>

分享到:
评论

相关推荐

    fusionChars,highchars,jqplot绘图插件Demo

    本DEMO——"fusionChars, highchars, jqplot绘图插件Demo",旨在帮助用户快速理解和应用这个插件。 首先,让我们了解一下`jqPlot`的基础。`jqPlot`是基于jQuery库开发的,因此在使用前需要先引入jQuery。它支持多种...

    jqplot.demo

    **jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化插件,它提供了一种简单易懂的方式来创建丰富的图表和图形。这个插件以其强大的功能和用户友好的特性而备受青睐,尤其适合那些需要在网页上展示复杂数据的...

    转盘抽奖demo 转盘抽奖demo

    转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖...

    clientDEMO clientdemo调试软件

    《clientDEMO:一款强大的监控调试工具》 在IT行业中,高效的监控与调试能力是确保系统稳定运行的关键。clientDEMO就是这样一款专为监控和调试而设计的专业软件,它在网络管理领域扮演着不可或缺的角色。这款工具以...

    各类网页设计项目demo演示

    增加3D相片demo增加文章note_jekyll更正图片档名增加作品集:表单删除tab选项卡的背景图更改posts/rwd的文章更改导航栏更正图片档名更正图片档名添加RWD文章各类网页设计项目demo演示各类网页设计项目demo演示各类...

    微信小程序学习demo:基础接口演示demo(源代码+截图)

    微信小程序学习demo:基础接口演示demo(源代码+截图)微信小程序学习demo:基础接口演示demo(源代码+截图)微信小程序学习demo:基础接口演示demo(源代码+截图)微信小程序学习demo:基础接口演示demo(源代码+截图)微信...

    小程序源码 移动端小商城DEMO (商城demo源码) (代码源)

    小程序源码 移动端小商城DEMO (商城demo源码) (代码源)小程序源码 移动端小商城DEMO (商城demo源码) (代码源)小程序源码 移动端小商城DEMO (商城demo源码) (代码源)小程序源码 移动端小商城DEMO (商城demo源码) ...

    微信小程序学习demo推荐:微赞社区(论坛demo)(适用1123(源代码+截图)

    微信小程序学习demo推荐:微赞社区(论坛demo)(适用1123(源代码+截图)微信小程序学习demo推荐:微赞社区(论坛demo)(适用1123(源代码+截图)微信小程序学习demo推荐:微赞社区(论坛demo)(适用1123(源代码+截图...

    一些html页面或是效果的demo

    一些html页面或是效果的demo 一些html页面或是效果的demo 一些html页面或是效果的demo 一些html页面或是效果的demo 一些html页面或是效果的demo 一些html页面或是效果...

    通联支付官方demo_DEMO_通联支付DEMO_通联支付官方demo_

    通联支付官方demo

    echarts 图表案例demo很多好看的demo

    echarts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的demoecharts 图表案例demo很多好看的...

    android 串口测试demo 代码简单 无bug 完美运行

    android 串口测试demo 代码简单 无bug 完美运行 android 串口测试demo 代码简单 无bug 完美运行 android 串口测试demo 代码简单 无bug 完美运行 android 串口测试demo 代码简单 无bug 完美运行 android 串口测试demo...

    微信小程序 小程序官方Demo (源码)

    微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小...

    模拟binder通信的demo

    模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo模拟binder通信的demo...

    微信小程序demo:商城(源代码+截图)

    微信小程序demo:商城(源代码+截图)微信小程序demo:商城(源代码+截图)微信小程序demo:商城(源代码+截图)微信小程序demo:商城(源代码+截图)微信小程序demo:商城(源代码+截图)微信小程序demo:商城(源代码+截图)...

    微信小程序经典demo学习案例:学习用demo(源代码+截图)

    微信小程序经典demo学习案例:学习用demo(源代码+截图)微信小程序经典demo学习案例:学习用demo(源代码+截图)微信小程序经典demo学习案例:学习用demo(源代码+截图)微信小程序经典demo学习案例:学习用demo(源代码+...

    微信小程序练习demo:练习demo(源代码+截图)

    微信小程序练习demo:练习demo(源代码+截图)微信小程序练习demo:练习demo(源代码+截图)微信小程序练习demo:练习demo(源代码+截图)微信小程序练习demo:练习demo(源代码+截图)微信小程序练习demo:练习demo(源代码+...

    支付宝当面付开发PHP Demo官网DEMO

    一、免责申明:官网DEMO 此DEMO仅供参考,实际开发中需要结合具体业务场景修改使用。 二、扫码支付中,如果商户通过异步通知来判断支付结果:需要严格按照如下描述校验通知数据的正确性。 1、商户需要验证该...

    高德地图2d demo新版全修改正确的demo(官网提供的demo有各种毛病需要修改)

    高德地图官网的开发文档全部偏向于3d地图,而缺乏对2d地图的讲解,所以我们只能跑demo但是2d的demo各种各样的毛病,通过好久我才将其修改完全,现在的demo可以正常运行!(在2022最新的as上) 经过修改,处理了高德...

Global site tag (gtag.js) - Google Analytics