效果图：
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="common.jsp"%>
<html>
<head>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript"
src="<%=path%>/resource/jqploat/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<style type="text/css">
.jqplot-table-legend{
width: 80px;
}
.jqplot-highlighter{
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function() {
//显示颜色
var areabgColor = ["#4bb2c5", "#c5b47f", "#EAA228", "#579575" ];
//说明文字
var descript = ['一次','二次','三次','四次','五次','六次','七次'];
//var one = [2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3]; [日期,时间]
var one = [[3,2],[5,3.2],[6,3],[7,2],[8,3],[9,2],[12,2],[13,3]];
var two = [8,9,8,9,8,9,8,9,8,9,8,9,8,9,8,9,8,9];
var three = [12,13,13,13,12,14,14,12,13,13,12,,];
var four = [[8,16],[9,15],[10,16]];
var plot = $.jqplot('chartdiv', [one,two,three,four],{
title : "example for first",
seriesColors : areabgColor,
stackSeries : false,
axes:{
label:'日期',
xaxis:{
ticks:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,
16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
fontFamily: 'Georgia',
showGridline:true,
fontSize:14,
formatString:'%d'
}
},
yaxis:{
//自定义坐标轴与增长规则
ticks:[[1,'7:00'],[2,'8:00'],[2.5,'8:30'],
[3,'9:00'],[4,'10:00'],[5,'11:00'],[5.5,'11:30'],
[6,'12:00'],[6.5,'12:30'],[7,'13:00'],[7.5,'13:30'],
[8,'14:00'],[9,'15:00'],[10,'16:00'],[11,'17:00'],
[11.5,'17:30'],[12,'18:00'],[12.5,'18:30'],[13,'19:00'],
[14,'20:00'],[15,'21:00'],[16,'22:00'],[17,'23:00'],[18,'24:00']],
tickOptions:{
fontFamily: 'Georgia',
fontSize:12,
formatString:''
}
}
},
highlighter: {
show: true,
useAxesFormatters:false,
tooltipAxes:'',
tooltipFormatString:'%d:00',
sizeAdjust: 20,//鼠标经过高亮时，圆点的大小
formatString:'<table class="jqplot-highlighter">'+
'<tr><td>日期 : </td><td>%s日</td></tr> '+
'<tr><td>时间 : </td><td>%s:00</td></tr></table>'
},
cursor: {
show: false
},
legend : {
show : true,
location : 'e',
placement : 'outside',
labels:descript//颜色区域的自定义文字描述
}
});
$("input[type=radio]").each(function(){
$(this).click(function(){
var type = $(this).val();
var data = [];
var color = [];
var desc = [];
if(type==0){
plot.replot({data:[one,two,three,four],
seriesColors:areabgColor,
legend:{labels:descript}});
return;
}else if(type ==1){
data.push(one);
color.push("#4bb2c5");
desc.push('一次');
}
else if(type ==2){
data.push(two);
color.push("#c5b47f");
desc.push('二次');
}
else if(type ==3){
data.push(three);
color.push("#EAA228");
desc.push('三次');
}
else if(type ==4){
data.push(four);
color.push("#579575");
desc.push('四次');
}
plot.replot({data:data,
seriesColors:color,
legend:{labels:desc}});//报表重绘
});
});
/**
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var plot1 = $.jqplot('chartdiv', [line1], {
title:'Data Point Highlighting',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
fontSize:14,
formatString:'%b %#d'
}
},
yaxis:{
tickOptions:{
formatString:'$%.2f'
}
}
},
highlighter: {
show: true,
useAxesFormatters:true,
tooltipAxes:'y',
sizeAdjust: 20//鼠标经过高亮时，圆点的大小
},
cursor: {
show: false
}
});
*/
/**
//显示颜色
var areabgColor = ["#FFFDF6","#4bb2c5", "#c5b47f", "#EAA228", "#579575" ];
//
$.jqplot("chartdiv", [[1,3,2,4,3,2,3,4,3,2,3,4,2,3,4,3,3],[1,3,2,4,3,2,3,4,3,2,3,4,2,5,4,3,5],
[1,3,2,4,3,2,3,4,3,2,3,4,2,2,4,3,5],[1,3,2,4,3,2,3,4,3,2,3,4,2,5,4,3,3]], {
title : "example for first",
seriesColors : areabgColor,
stackSeries : true,
captureRightClick: true,
axes:{
label:'日期',
xaxis:{
ticks:[[1,' asas'],[2,' asas'],[3,' asas'],[4,' asas'],[5,' asas'],[6,' asas'],[7,'asas'],[8,'asas'],[9,'asas'],
[11,' asas'],[12,' asas'],[13,' asas'],[14,' asas'],[15,' asas'],[16,' asas'],[17,'asas'],[18,'asas'],[1,'asas'],
[11,' asas'],[11,' asas'],[11,' asas'],[1,' asas'],[1,' asas'],[1,' asas'],[1,'asas'],[1,'asas'],[1,'asas']],
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions:{
fontFamily: '黑体',
showGridline:false,
fontSize:'11pt',
angle: 70
}
},
yaxis:{
//自定义坐标轴与增长规则
ticks:[[1,'7:00'],[2,'8:00'],[2.5,'8:30'],
[3,'9:00'],[4,'10:00'],[5,'11:00'],[5.5,'11:30'],
[6,'12:00'],[6.5,'12:30'],[7,'13:00'],[7.5,'13:30'],
[8,'14:00'],[9,'15:00'],[10,'16:00'],[11,'17:00'],
[11.5,'17:30'],[12,'18:00'],[12.5,'18:30'],[13,'19:00'],
[14,'20:00'],[15,'21:00'],[16,'22:00'],[17,'23:00'],[18,'24:00']],
tickOptions:{
fontFamily: 'Georgia',
fontSize:12,
formatString:''
}
}
},
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
highlightMouseDown : true,
barWidth:14
},
pointLabels : {
show : true
}
},
legend : {
show : true,
location : 'e',
placement : 'outside',
labels:['ww','qq']//颜色区域的自定义文字描述
},
highlighter:{
show: true,
showMarker:false,
tooltipAxes: 'xy',
yvalues: 4,
formatString:'<table class="jqplot-highlighter">'+
'<tr><td>date:</td><td>%s</td></tr> '+
'<tr><td>open:</td><td>%s</td></tr> '+
'<tr><td>hi:</td><td>%s</td></tr> '+
'<tr><td>low:</td><td>%s</td></tr> '+
'<tr><td>close:</td><td>%s</td></tr></table>'
}
});*/
});
</script>
</head>
<body>
<center>
<div style="margin-top: 50px;">
<input type="radio" name="choise" value="0" checked="checked"/>全部
<input type="radio" name="choise" value="1"/>一次
<input type="radio" name="choise" value="2"/>二次
<input type="radio" name="choise" value="3"/>三次
<input type="radio" name="choise" value="4"/>四次
</div>
<div id="chartdiv" style="height: 600px; width: 1000px;margin-top: 40px;background: yellow;"></div>
</center>
</body>
</html>1、将颜色块的说明，宽度变小；
2、显示高亮时，获取y坐标上的标签值，而不是设定的值；
在这里请教一下做过这方面的高手，感激不尽！！
使用jqplot创建报表（一） 初学后写的第一个案例源码,布布扣,bubuko.com
原文地址：http://blog.csdn.net/u010150082/article/details/30065823
