jqPlot jQuery绘图插件的使用

jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips，数据点高亮显示等功能。

官网：http://www.jqplot.com/

这里贡献上中文教程，基本上所有的api都很齐全，供有需要的童鞋们瞧瞧，更重要的是作为自己滴收藏~~哦耶耶~

jqPlot整的来说有三个地方需要配置。格式如：

$.jqplot(‘target', data, options);target：要显示的位置。data：显示的数据。options：其它配置

seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色，如果分类的数量超过这里的颜色数量，则从该队列中第一个位置开始重新取值赋给相应的分类 

stackSeries: false, // 如果置为true并且有多个分类（如果是折线图，就必须多于一条折线）， 那么每个分类（折线）在纵轴上的值为其前所有分类纵轴值总和与其纵，轴值相加值（eg,                   当前分类纵轴值为Y3
  title: '',     //设置当前图的标题

  title: {
    text: '', //设置当前图的标题
    show: true,//设置当前图的标题是否显示
  },

  axesDefaults: {
    show: false,  是否自动显示坐标轴。
    min: null,   横(纵)轴最小刻度值
    max: null,    横(纵)轴最大刻度值
    pad: 1.2,    横(纵)轴度值增涨因子
    ticks: [],   //设置横（纵）坐标的刻度上的值，可为该ticks数组中的值
    numberTicks: undefined,//一个相除因子，用于设置横（纵）坐标刻度间隔，横（纵）坐标刻度间隔值=横（纵）坐标区间长度/(numberTicks-1)
    renderer: $.jqplot.LinearAxisRenderer, // 设置横（纵）轴上数据加载的渲染器
    rendererOptions: {},  // 设置renderer的Option配置对象，线状图不需要设置
    tickOptions: {
      mark: 'outside',  // 设置刻度在坐标轴上的显示方式：分为:坐标轴外显示，内显示，和穿过显示;其值分别为 'outside', 'inside' or 'cross'。
      showMark: true,   //设置是否显示刻度
      showGridline: true, // 是否在图表区域显示刻度值方向的网格
      markSize: 4,   // 每个刻度线顶点距刻度线在坐标轴上点距离（像素为单位)如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点，刻度线与坐标轴
                在刻度线中间交叉，那么这时这个距离×2
      show: true,     //是否显示刻度线，与刻度线同方向的网格线，以及坐标轴上的刻度值
      showLabel: true,  //是否显示刻度线以及坐标轴上的刻度值
      formatString: '',  //设置坐标轴上刻度值显示格式，eg:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008"
     fontSize:'10px',  //刻度值的字体大小 
      fontFamily:'Tahoma', //刻度值上字体 
      angle:40,      //刻度值与坐标轴夹角，角度为坐标轴正向顺时针方向 
      fontWeight:'normal', //字体的粗细 
      fontStretch:1//刻度值在所在方向（坐标轴外）上的伸展(拉伸)度
    }
    showTicks: true,    //是否显示刻度线以及坐标轴上的刻度值,
    showTickMarks: true,  // 设置是否显示刻度
    useSeriesColor: true  //如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否以不同颜色显示
  },

  axes: {
    xaxis: {
      // same options as axesDefaults
    },
    yaxis: {
      // same options as axesDefaults
    },
    x2axis: {
      // same options as axesDefaults
    },
    y2axis: {
      // same options as axesDefaults
    }
  },

  seriesDefaults: {//如果有多个分类，这可通过该配置属性设置各个分类的共性属性
    show: true,   //设置是否渲染整个图表区域（即显示图表中内容）.
    xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
    yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
    label: '',   // 用于显示在分类名称框中的分类名称.
    color: '',   // 分类在图标中表示（折现，柱状图等）的颜色.
    lineWidth: 2.5, // 分类图（特别是折线图）哪宽度.
    shadow: true,  // 各图在图表中是否显示阴影区域.
    shadowAngle: 45,  //参考grid中相同参数.
    shadowOffset: 1.25, //参考grid中相同参数.
    shadowDepth: 3,   //参考grid中相同参数.
    shadowAlpha: 0.1,  // Opacity of the shadow.
    showLine: true,   //是否显示图表中的折线（折线图中的折线） 
    showMarker: true,  // 是否强调显示图中的数据节点 
    fill: false,    // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend 
              //设置的分类名称框中分类的颜色，此处注意的是如果fill为true， 
              //那么showLine必须为true，否则不会显示效果 
    fillAndStroke: false,    //在fill为true的状态下，在填充区域最上面显示一条线（如果是折线图则显示该折线） 
    fillColor: undefined,    // 设置填充区域的颜色 
    fillAlpha: undefined,    // 梃置填充区域的透明度 
    renderer: $.jqplot.PieRenderer, // 利用渲染器（这里是利用饼图PieRenderer）渲染现有图表 
                    //，从而转换成所需图表 
    rendererOptions: {}, // 传给上个属性所设置渲染器的option对象，线状图的渲染器没有option对象， 
               //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》 
               //中各个图表的配置Option对象 
    markerRenderer: $.jqplot.MarkerRenderer,  // renderer to use to draw the data  
                          // point markers. 
    markerOptions: {  
      show: true,       // 是否在图中显示数据点 
      style: 'filledCircle', // 各个数据点在图中显示的方式，默认是"filledCircle"(实心圆点), 
                  //其他几种方式circle，diamond, square, filledCircle， 
                  // filledDiamond or filledSquare. 
      lineWidth: 2,    // 数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点） 
      size: 9,      // 数据点的大小 
      color: '#666666'  // 数据点的颜色 
      shadow: true,    // 是否为数据点显示阴影区（增加立体效果） 
      shadowAngle: 45,  // 阴影区角度，x轴顺时针方向 
      shadowOffset: 1,  // 参考grid中相同参数 
      shadowDepth: 3,   //参考grid中相同参数 
      shadowAlpha: 0.07  // 参考grid中相同参数 
    } 
    isDragable: true,//是否允许拖动（如果dragable包已引入）,默认可拖动
  },

  series:[
    //如果有多个分类需要显示，这在此处设置各个分类的相关配置属性 
    //eg.设置各个分类在分类名称框中的分类名称
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]//配置参数设置同seriesDefaults
],
 legend: { 
    show: false,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置） 
    location: 'ne',   // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
    xoffset: 12,    // 分类名称框距图表区域上边框的距离（单位px） 
    yoffset: 12,    // 分类名称框距图表区域左边框的距离(单位px) 
    background:''    //分类名称框距图表区域背景色 
    textColor:''     //分类名称框距图表区域内字体颜色  
  }, 
  grid: { 
    drawGridLines: true,    // wether to draw lines across the grid or not. 
    gridLineColor: '#cccccc'  // 设置整个图标区域网格背景线的颜色 
    background: '#fffdf6',   // 设置整个图表区域的背景色 
    borderColor: '#999999',   // 设置图表的(最外侧)边框的颜色 
    borderWidth: 2.0,      //设置图表的（最外侧）边框宽度 
    shadow: true,        // 为整个图标（最外侧）边框设置阴影，以突出其立体效果 
    shadowAngle: 45,      // 设置阴影区域的角度，从x轴顺时针方向旋转 
    shadowOffset: 1.5,     // 设置阴影区域偏移出图片边框的距离 
    shadowWidth: 3,       // 设置阴影区域的宽度 
    shadowDepth: 3,       // 设置影音区域重叠阴影的数量 
    shadowAlpha: 0.07      // 设置阴影区域的透明度 
    renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid. 
    rendererOptions: {}     // options to pass to the renderer. Note, the default 
                  // CanvasGridRenderer takes no additional options. 
  },                
  //jqPlot各个不同插件的Option对象设置
  // BarRenderer（设置柱状图的Option对象） 
  //该Option对象适用与柱状图的series和seriesDefault属性的相关配置对象设置 
  seriesDefaults: { 
    rendererOptions: { 
      barPadding: 8,   //设置同一分类两个柱状条之间的距离（px） 
      barMargin: 10,   //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上） 
      barDirection: 'vertical',