JQUERY插件学习之jqPlot

作者:bravezhe


       JS图表,有HighCharts、JqPlot、JsChart,其中HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,在这用了JqPlot(个人和商业都免费),先学习下。

        关于JqPlot的下载可以去:www.jqplot.com/

       关于JqPlot的详细中文配置参考:http://blog.csdn.net/gaoyusi4964238/article/details/4378459

       下载下来后,所有文件如下图:


这里主要是参考jqPlot官方网站关于Option的介绍并结自己简单实践和理解来对Option的相关属性进行解释,如有不合适或错误的地方请指正。

  1. options =   
  2. {  
  3.     seriesColors: [ "#4bb2c5""#c5b47f""#EAA228""#579575""#839557""#958c12",   
  4.         "#953579""#4b5de4""#d8b83f""#ff5800""#0085cc"],  // 默认显示的分类颜色,  
  5.         //如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类  
  6.     stackSeries: false// 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线),  
  7.                         // 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵  
  8.                         //轴值相加值(eg,当前分类纵轴值为Y3  
  9.                         //,其前有Y2,Y1,那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图  
  10.     title: '',      //设置当前图的标题  
  11.     title: {  
  12.         text: '',   // 设置当前图的标题  
  13.         show: true,//设置当前标题是否显示  
  14.     },  
  15.     axisDefaults: {  
  16.         show: false,    // wether or not to renderer the axis.  Determined automatically.  
  17.         min: null,      // 横(纵)坐标显示的最小值  
  18.         max: null,      // 横(纵)坐标显示的最大值  
  19.         pad: 1.2,       // 一个相乘因子,  
  20.                 //(数据在横(纵)轴上最大值-数据在横(纵)轴上最小值)*pad值=该轴显示的横(纵)坐标区间长度  
  21.                 // 该轴显示的横(纵)坐标区间长度=横(纵)坐标显示的最大值-横(纵)坐标显示的最小值  
  22.                 //如果设置了max和min的值的话,那么会优先考虑min和max设置的值  
  23.         ticks: [],      //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值,  
  24.                       // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]                           
  25.         numberTicks: undefined,  //一个相除因子,用于设置横(纵)坐标刻度间隔  
  26.                                  //横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-1)  
  27.         tickInterval:'',         //横(纵)坐标刻度间隔值,可为日期字符串  
  28.         renderer: $.jqplot.LinearAxisRenderer,  // 设置横(纵)轴上数据加载的渲染器,有dateAxisRenderer(参见本文最后相关介绍) 。  
  29.         rendererOptions: {},    // 设置renderer的Option配置对象,线状图不需要设置  
  30.                     //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》  
  31.                              //中各个图表的配置Option对象  
  32.         tickOptions: {  
  33.             mark: 'outside',    // 设置横(纵)坐标刻度在坐标轴上显示方式,分为坐标轴内,外,穿过坐标轴显示  
  34.                                 // 值也分为:'outside', 'inside' 和 'cross',  
  35.             showMark: true,     //设置是否显示刻度  
  36.             showGridLine: true// 是否在图表区域显示刻度值方向的网格线  
  37.             markSize: 4,        // 每个刻度线顶点距刻度线在坐标轴上点距离(像素为单位)  
  38.                                 //如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴  
  39.                                 //在刻度线中间交叉,那么这时这个距离×2,  
  40.             show: true,         // 是否显示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值  
  41.             showLabel: true,    // 是否显示刻度线以及坐标轴上的刻度值  
  42.             formatString: '',   // 梃置坐标轴上刻度值显示格式,eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"  
  43.             fontSize:'10px',    //刻度值的字体大小  
  44.            fontFamily:'Tahoma'//刻度值上字体  
  45.            angle:40,           //刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向  
  46.            fontWeight:'normal'//字体的粗细  
  47.            fontStretch:1//刻度值在所在方向(坐标轴外)上的伸展(拉伸)度  
  48.         }  
  49.         showTicks: true,        /// 是否显示刻度线以及坐标轴上的刻度值  
  50.         showTickMarks: true,    //设置是否显示刻度  
  51.         useSeriesColor: true     //如果有多个纵(横)坐标轴,通过该属性设置这些坐标轴是否以不同颜色显示  
  52.     },  
  53.       
  54.     axes: {  
  55.         xaxis: {  
  56.             // 设置同 axisDefaults  
  57.         },  
  58.         yaxis: {  
  59.             // 设置同 axisDefaults  
  60.         },  
  61.         x2axis: {  
  62.            // 设置同 axisDefaults  
  63.         },  
  64.         y2axis: {  
  65.             // 设置同 axisDefaults  
  66.         }  
  67.     },  
  68.       
  69.     seriesDefaults: {//如果有多个分类,这可通过该配置属性设置各个分类的共性属性  
  70.         show: true,     // 设置是否渲染整个图表区域(即显示图表中内容)  
  71.         xaxis: 'xaxis'// either 'xaxis' or 'x2axis'.  
  72.         yaxis: 'yaxis'// either 'yaxis' or 'y2axis'.  
  73.         label: '',      // 用于显示在分类名称框中的分类名称  
  74.         color: '',      // 分类在图标中表示(折现,柱状图等)的颜色  
  75.         lineWidth: 2.5, // 分类图(特别是折线图)哪宽度  
  76.         shadow: true,   // 各图在图表中是否显示阴影区域  
  77.         shadowAngle: 45,    // 参考grid中相同参数  
  78.         shadowOffset: 1.25, // 参考grid中相同参数  
  79.         shadowDepth: 3,     // 参考grid中相同参数  
  80.         shadowAlpha: 0.1,   // 参考grid中相同参数  
  81.         showLine: true,     //是否显示图表中的折线(折线图中的折线)  
  82.         showMarker: true,   // 是否强调显示图中的数据节点  
  83.         fill: false,        // 是否填充图表中折线下面的区域(填充颜色同折线颜色)以及legend  
  84.                             //设置的分类名称框中分类的颜色,此处注意的是如果fill为true,  
  85.                            //那么showLine必须为true,否则不会显示效果  
  86.         fillAndStroke: false,       //在fill为true的状态下,在填充区域最上面显示一条线(如果是折线图则显示该折线)  
  87.         fillColor: undefined,       // 设置填充区域的颜色  
  88.         fillAlpha: undefined,       // 梃置填充区域的透明度  
  89.         renderer: $.jqplot.PieRenderer,  // 利用渲染器(这里是利用饼图PieRenderer)渲染现有图表  
  90.                                        //,从而转换成所需图表  
  91.         rendererOptions: {}, // 传给上个属性所设置渲染器的option对象,线状图的渲染器没有option对象,  
  92.                              //不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》  
  93.                              //中各个图表的配置Option对象  
  94.         markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data   
  95.                                                     // point markers.  
  96.         markerOptions: {   
  97.             show: true,             // 是否在图中显示数据点  
  98.             style: 'filledCircle',  // 各个数据点在图中显示的方式,默认是"filledCircle"(实心圆点),  
  99.                                     //其他几种方式circle,diamond, square, filledCircle,  
  100.                                     // filledDiamond or filledSquare.  
  101.             lineWidth: 2,       // 数据点各个的边的宽度(如果设置过大,各个边会重复,会显示的类似于实心点)  
  102.             size: 9