目前实现的功能和未实现需要深入研究的有
1：同时至少N条线的绘制和不同颜色的演示(N至少大于8不会有任何问题，问题是太多了之后，颜色难以区分，而且如果有些点重合的话，也不方便看)
2：X轴显示日期，Y轴显示点击量，图表的右侧显示哪几条线的颜色（实例里面可以点击最右边的颜色，来动态的隐藏坐标图里面的线，但是我没有测试出来）
3：X轴，如果是时间的话，能用天数，月数，年数来间隔显示每一个点，问题是，到底用多大来间隔，我现在是定死的，例如我定死为2天，但是实际情况中，需要调整为动态，或者是说应该能根据什么数据来动态的调整间隔
4：当框中几个点或者是区域之后，可以放大显示，双击还原。问题是放大之后，X轴上面因为日期太密显得很难看
5:前台部分代码,jqPlot 在firefox 火狐浏览器里面，图标右侧的标题，会变形，解决方法是在控制 标题的 lable的子元素里面，手动加一个div包括起来，定义一个css
series: [{ label: ' (点击量:3)即将上线' }, { label: ' (点击量:1)这是一个演示' }], //右侧的每个广告的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" />
-
- <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: ' (点击量:3)即将上线' },
{ label: ' (点击量:1)这是一个演示' - }], //右侧的每个广告的title
-
- seriesColors: ["#4bb2c5", "#c5b47f", "#EAA228","#953579", "#4b5de4", "#ff5800"], // 默认显示的分类颜色，
-
- title:'本周统计',
-
- 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: '
\-
-
时间: %s -
-
点击量: %s -
-
' //这里的%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>