jqPlot——基于jquery的图表绘制工具简单使用,jqPlot 在firefox 火狐浏览器里面，图表右侧的标题，变形的解决方法...-CSDN博客

目前实现的功能和未实现需要深入研究的有

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>&nbsp;&nbsp;(点击量:3)</div>即将上线</div>' },

         { label: '<div class=adCountTitle><div style=float:right>&nbsp;&nbsp;(点击量: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>&nbsp;&nbsp;(点击量:3)</div>即将上线</div>' },

         { label: '<div class=adCountTitle><div style=float:right>&nbsp;&nbsp;(点击量: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>