一、初学后写的第一个案例源码
效果图：
代码如下：
<%@ 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>初看jqplot制作的报表，现在有两个地方需要修改：
1、将颜色块的说明，宽度变小；
2、显示高亮时，获取y坐标上的标签值，而不是设定的值；
在这里请教一下做过这方面的高手，感激不尽！！