jqPlot——基于jquery的图表绘制工具简单使用,jqPlot 在firefox 火狐浏览器里面，图表右侧的标题，变形的解决方法
目前实现的功能和未实现需要深入研究的有
1：同时至少N条线的绘制和不同颜色的演示(N至少大于8不会有任何问题，问题是太多了之后，颜色难以区分，而且如果有些点重合的话，也不方便看)
2：X轴显示日期，Y轴显示点击量，图表的右侧显示哪几条线的颜色（实例里面可以点击最右边的颜色，来动态的隐藏坐标图里面的线，但是我没有测试出来）
3：X轴，如果是时间的话，能用天数，月数，年数来间隔显示每一个点，问题是，到底用多大来间隔，我现在是定死的，例如我定死为2天，但是实际情况中，需要调整为动态，或者是说应该能根据什么数据来动态的调整间隔
4：当框中几个点或者是区域之后，可以放大显示，双击还原。问题是放大之后，X轴上面因为日期太密显得很难看
5:前台部分代码,jqPlot 在firefox 火狐浏览器里面，图标右侧的标题，会变形，解决方法是在控制 标题的 lable的子元素里面，手动加一个div包括起来，定义一个css
series: [{ label: '<div class=adCountTitle><div style=float:right> (点击量:3)</div>即将上线</div>' }, { label: '<div class=adCountTitle><div style=float:right> (点击量:1)</div>这是一个演示</div>' }], //右侧的每个广告的title
.adCountTitle{ width:200px;}
======================生成的前台html代码 ================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script> <link class="include" rel="stylesheet" type="text/css" href="../Scripts/plugins/jqPlot/jquery.jqplot.min.css" /> <!--[if lt IE 9]> <script src="../Scripts/plugins/jqPlot/excanvas.js"></script> <![endif]--> <!--重要的开始--> <script type="text/javascript" src="../Scripts/plugins/jqPlot/jquery.jqplot.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var line0 = [['2012-10-14', 0],['2012-10-15', 3],['2012-10-20', 0]];
var line1 = [['2012-10-14', 0],['2012-10-15', 1],['2012-10-20', 0]]; $('#chart1').jqplot([line0,line1],{ series: [{ label: '<div class=adCountTitle><div style=float:right> (点击量:3)</div>即将上线</div>' },
{ label: '<div class=adCountTitle><div style=float:right> (点击量:1)</div>这是一个演示</div>' }], //右侧的每个广告的title seriesColors: ["#4bb2c5", "#c5b47f", "#EAA228","#953579", "#4b5de4", "#ff5800"], // 默认显示的分类颜色， title:'<strong>本周统计</strong>', axes:{ xaxis: { //横坐标 x轴 label: "时间刻度：年-月-日", labelOptions: { fontFamily: '黑体', textColor: "pink", fontSize: '11pt' }, renderer:$.jqplot.DateAxisRenderer, tickOptions:{ formatString: '%Y-%m-%d' } , min: '2012-10-13', max: '2012-10-21', tickInterval: '1 day' //开始，结束，间隔时间(可以是年，月，日) }, yaxis: { label: "点击次数", labelOptions: { fontFamily: '黑体', textColor: "green", fontSize: '11pt' }, tickOptions:{ formatString: '%.1i' // %百分号就表示值 .2f 表示float类型？小数点后2位？ } } }, highlighter: { //荧光笔 高亮笔 show: true, sizeAdjust: 20, //尺寸调整 fadeTooltip: true, formatString: '<table bgcolor="#f2f2f2"> \ <tr><td>时间:</td><td>%s</td></tr> \ <tr><td>点击量:</td><td>%s</td></tr> \ </table>' //这里的%s是按照 数组里面的顺序来显示的 }, legend: { show: true,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. background:'blue', //分类名称框距图表区域背景色 textColor:'red' , //分类名称框距图表区域内字体颜色 placement: 'outside' }, cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false }, }); }); </script> </head> <body> <div id="chart1" style="height:400px; width:900px; margin-left:60px;"></div> <!--鼠标放上去 显示圆圈以及注释--> <script language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.highlighter.min.js"></script> <!--缩放的--> <script language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.cursor.min.js"></script> <!--主要用来显示数据的渲染器--> <script language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.dateAxisRenderer.min.js"></script> <!--结束--> </body> </html>
