<!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>
