jqplot总结

JqPlot需要三个参数，1.位置，2.数据，3.配置。

重点是3.配置。

配置大概分为title(标题)，axes(xy轴)，series(数据的连续图)，dataRenderer外部数据加载方式，highlighter鼠标靠近，数据显示方式，cursor鼠标样式变化，以及显示当前数值。

 

axes轴里面有轴名字label；轴名字的渲染引擎labelRenderer，以及轴名字相关样式(大小fontSize，字体种类fontFamily，颜色等等)；轴刻度值tickOptions(字体大小fontSize，旋转角度angle，字体种类fontFamily)；轴的渲染引擎renderer；轴刻度值的渲染引擎tickRenderer；离数据连续图的距离pad；自动分配刻度值autoscale；刻度值和标签值的相对位置labelPosition；

 

series数据连续图有，渲染引擎renderer(线条，柱形，圆饼等等)；是否展示数值点(showMarker)；

 

dataRenderer外部数据加载方式。

 

highlighter鼠标靠近，数据显示方式。

 

cursor鼠标样式变化，以及显示当前数值。

 

特别说明legend。

--------------------------------------------------------------------------------

官网API翻译（很未完，因为没时间）

 

Axis
    autoscale:默认是false。当你没设置min或max，也就是XY轴的最小或最大刻度值时，autoscale关闭。numberTicks, tickInterval 和pad这些属性与autoscale相关。padMin和padMax这两个属性与autoscale无关。

 

--------------------------------------------------------------------------------

官网的exapmle（很未完，因为没时间）

 

Line charts, scatter plots and series options. 

 

 

 

<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8"   />
< title >line-charts </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="jquery.jqplot.css"   />
<!-- [if lt IE 9]><script type="javascript" type="text/javascript" src="excanvas.js"></script><![endif] -->
< script  type ="text/javascript"  src ="jquery.js" ></ script >
< script  type ="text/javascript"  src ="jquery.jqplot.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasTextRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script >
< script  type ="text/javascript" >
$( function (){
     var  plot1  =  $.jqplot ( ' chart1 ' , [[ 3 , 7 , 9 , 1 , 4 , 6 , 8 , 2 , 5 ]]);

     var  plot2  =  $.jqplot ( ' chart2 ' , [[ 3 , 7 , 9 , 1 , 4 , 6 , 8 , 2 , 5 ]], {
       //  Give the plot a title.标题
      title:  ' Plot With Options ' ,
       //  You can specify options for all axes on the plot at once with
       //  the axesDefaults object.  Here, we're using a canvas renderer
       //  to draw the axis label which allows rotated text.
       //  axesDefaults指定的参数配置，适用于所有轴。这里是指x，y轴的label用canvas画出
      axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
       //  An axes object holds options for all axes.
       //  Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
       //  Up to 9 y axes are supported.
      axes: {
         //  options for each axis are specified in seperate option objects.
        xaxis: {
          label:  " X Axis " ,
           //  Turn off "padding".  This will allow data point to lie on the
           //  edges of the grid.  Default padding is 1.2 and will keep all
           //  points inside the bounds of the grid.
           //  pad是指，起始点是不是靠近轴。默认是1.2，这里0表示就在轴上
          pad:  0
        },
        yaxis: {
          label:  " Y Axis "
        }
      }
    });


     //  Some simple loops to build up data arrays.
     //  这些循环用来构造数据
   var  cosPoints  =  [];
   for  ( var  i = 0 ; i < 2 * Math.PI; i += 0.4 ){ 
    cosPoints.push([i, Math.cos(i)]); 
  }
    
   var  sinPoints  =  []; 
   for  ( var  i = 0 ; i < 2 * Math.PI; i += 0.4 ){ 
     sinPoints.push([i,  2 * Math.sin(i - . 8 )]); 
  }
    
   var  powPoints1  =  []; 
   for  ( var  i = 0 ; i < 2 * Math.PI; i += 0.4 ) { 
      powPoints1.push([i,  2.5   +  Math.pow(i / 4, 2)]); 
  }
    
   var  powPoints2  =  []; 
   for  ( var  i = 0 ; i < 2 * Math.PI; i += 0.4 ) { 
      powPoints2.push([i,  - 2.5   -  Math.pow(i / 4, 2)]); 
  } 
 
   var  plot3  =  $.jqplot( ' chart3 ' , [cosPoints, sinPoints, powPoints1, powPoints2], 
    { 
      title: ' Line Style Options ' , 
       //  Series options are specified as an array of objects, one object
       //  for each series.
       //  series参数是一个对象数组，一个对象对应一组数据
      series:[ 
          {
             //  Change our line width and use a diamond shaped marker.
            lineWidth: 2 , 
            markerOptions: { style: ' dimaond '  }
          }, 
          {
             //  Don't show a line, just show markers.
             //  Make the markers 7 pixels with an 'x' style
             //  去掉两点之间的连线；设置字母x的大小为7px
            showLine: false , 
            markerOptions: { size:  7 , style: " x "  }
          },
          { 
             //  Use (open) circlular markers.
            markerOptions: { style: " circle "  }
          }, 
          {
             //  Use a thicker, 5 pixel line and 10 pixel
             //  filled square markers.
             //  设置线条的粗细，以及标记的样式
            lineWidth: 5 , 
            markerOptions: { style: " filledSquare " , size: 10  }
          }
      ]
    }
  );


});
</ script >

</ head >
< body >
     < div  id ="chart1" ></ div >
     < div  id ="chart2" ></ div >
     < div  id ="chart3" ></ div >
</ body >
</ html >

 

 

 

Axis Labels and label options.

<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8"   />
< title >axis Label Test </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="jquery.jqplot.css"   />
<!-- [if lt IE 9]><script type="javascript" type="text/javascript" src="excanvas.js"></script><![endif] -->
< script  type ="text/javascript"  src ="jquery.js" ></ script >
< script  type ="text/javascript"  src ="jquery.jqplot.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasTextRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script >
< script  type ="text/javascript" >
$( function (){
//  生成测试数据
var  cosPoints  =  [];
for ( var  i  =   0 ; i  <   2   *  Math.PI; i  +=   0.1 ) {
  cosPoints.push([i, Math.cos(i)]);
}

var  plot1  =  $.jqplot( ' chart1 ' , [cosPoints], {
    series: [{
       //  去掉点的标记
        showMarker:  false
    }],
    axes: {
        xaxis: {
           //  轴的名字
            label:  ' Angle (radians) '
        },
        yaxis: {
            label:  ' Cosine '
        }
    }
});


var  plot2  =  $.jqplot( ' chart2 ' , [cosPoints], {
  series: [{
    showMarker:  false
  }],
  axes: {
    xaxis: {
      label:  ' Angle (radians) ' ,
       //  轴的名字渲染引擎
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    yaxis: {
      label:  ' Cosine ' ,
       //  加入labelRenderer参数后，y轴label开始翻转90°
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
  }
});


var  plot3  =  $.jqplot( ' chart3 ' , [cosPoints], {
  series: [{
    showMarker:  false
  }],
  axes: {
    xaxis: {
      label:  ' Angle (radians) ' ,
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
       //  设置轴的名字的，字体和大小
      labelOptions: {
        fontFamily:  ' Georgia, Serif ' ,
        fontSize:  ' 12pt '
      }
    },
    yaxis: {
      label:  ' Cosine ' ,
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
      labelOptions: {
        fontFamily:  ' Georgia, Serif ' ,
        fontSize:  ' 12pt '
      }
    }
  }
});


});
</ script >

</ head >
< body >
     < div  id ="chart1" ></ div >
     < div  id ="chart2" ></ div >
     < div  id ="chart3" ></ div >
</ body >
</ html >

Axis Tick Labels and rotated text.

<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8"   />
< title >rotated-tick-labels </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="jquery.jqplot.css"   />
<!-- [if lt IE 9]><script type="javascript" type="text/javascript" src="excanvas.js"></script><![endif] -->
< script  type ="text/javascript"  src ="jquery.js" ></ script >
< script  type ="text/javascript"  src ="jquery.jqplot.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.dateAxisRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasTextRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.canvasAxisTickRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.categoryAxisRenderer.min.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.barRenderer.min.js" ></ script >
< script  type ="text/javascript" >
$( function (){
var  line1  =  [
  [ ' Cup Holder Pinion Bob ' ,  7 ],
  [ ' Generic Fog Lamp ' ,  9 ],
  [ ' HDTV Receiver ' ,  15 ],
  [ ' 8 Track Control Module ' ,  12 ],
  [ '  Sludge Pump Fourier Modulator ' ,  3 ],
  [ ' Transcender/Spice Rack ' ,  6 ],
  [ ' Hair Spray Danger Indicator ' ,  18 ]
];

var  plot1  =  $.jqplot( ' chart1 ' , [line1], {
  title:  ' Concern vs. Occurrance ' ,
  series: [{
     //  数据的连续图的渲染引擎，用柱形图表示数据
    renderer: $.jqplot.BarRenderer
  }],
  axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
     //  轴的标签
    tickOptions: {
      angle:  - 30 ,
      fontSize:  ' 10pt '
    }
  },
  axes: {
    xaxis: {
       //  x轴用数据里面的数组第一个元素
      renderer: $.jqplot.CategoryAxisRenderer
    }
  }
});


var  plot1b  =  $.jqplot( ' chart1b ' , [line1], {
  title:  ' Concern vs. Occurrance ' ,
  series: [{
    renderer: $.jqplot.BarRenderer
  }],
  axesDefaults: {
     //  轴的刻度值，渲染引擎
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
     //  轴的刻度值，字体大小，字体类型，字体角度
    tickOptions: {
      fontFamily:  ' Georgia ' ,
      fontSize:  ' 10pt ' ,
      angle:  - 30
    }
  },
  axes: {
    xaxis: {
       //  轴的渲染引擎
      renderer: $.jqplot.CategoryAxisRenderer
    }
  }
});

//  var line2 = [
//    ['Nickle', 28],
//    ['Aluminum', 13],
//    ['Xenon', 54],
//    ['Silver', 47],
//    ['Sulfer', 16],
//    ['Silicon', 14],
//    ['Vanadium', 23]
//  ];
var  line2  =  [
  [ ' Cup Holder Pinion Bob ' ,  7 ],
  [ ' Generic Fog Lamp ' ,  9 ],
  [ ' HDTV Receiver ' ,  15 ],
  [ ' 8 Track Control Module ' ,  12 ],
  [ '  Sludge Pump Fourier Modulator ' ,  3 ],
  [ ' Transcender/Spice Rack ' ,  6 ],
  [ ' Hair Spray Danger Indicator ' ,  18 ]
];


var  plot2  =  $.jqplot( ' chart2 ' , [line1, line2], {
series: [{
  renderer: $.jqplot.BarRenderer
}, 
//  在series里第二个对象表示，第二个数据连续的图的配置。在这里是它的纵坐标叫y2axis，横坐标叫x2axis
{
  xaxis:  ' x2axis ' ,
  yaxis:  ' y2axis '
}],
axesDefaults: {
  tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  tickOptions: {
     //  angle: 30
  }
},
axes: {
  xaxis: {
    renderer: $.jqplot.CategoryAxisRenderer
  },
  x2axis: {
    renderer: $.jqplot.CategoryAxisRenderer
  },
  yaxis: {
     //  自动刻度值
    autoscale:  true
  },
  y2axis: {
    autoscale:  true
  }
}
});

var  plot3  =  $.jqplot( ' chart3 ' , [line1], {
  title:  ' Concern vs. Occurrance ' ,
  series: [{
    renderer: $.jqplot.BarRenderer
  }],
  axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: {
      angle:  - 30
    }
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer,
      tickOptions: {
        labelPosition:  ' middle '
      }
    },
    yaxis: {
      autoscale:  true ,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
        labelPosition:  ' start '
      }
    }
  }
});

});
</ script >

</ head >
< body >
     < div  id ="chart1" ></ div >
     < div  id ="chart1b" ></ div >< hr  />
     < div  id ="chart2" ></ div >< hr  />
     < div  id ="chart3" ></ div >
</ body >
</ html >

AJAX, JSON data loading and external plot data functions.

<! DOCTYPE html >
< html >
< head >
< meta  charset ="utf-8"   />
< title >rotated-tick-labels </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="jquery.jqplot.css"   />
<!-- [if lt IE 9]><script type="javascript" type="text/javascript" src="excanvas.js"></script><![endif] -->
< script  type ="text/javascript"  src ="jquery.js" ></ script >
< script  type ="text/javascript"  src ="jquery.jqplot.js" ></ script >
< script  type ="text/javascript"  src ="plugins/jqplot.json2.min.js" ></ script >
< script  type ="text/javascript" >
$( function () {
     //  Our data renderer function, returns an array of the form:
     //  [[[x1, sin(x1)], [x2, sin(x2)], ...]]
     //  构造测试数据
     var  sineRenderer  =   function () {
         var  data  =  [[]];
         for  ( var  i = 0 ; i < 13 ; i += 0.5 ) {
            data[ 0 ].push([i, Math.sin(i)]);
        }
         return  data;
    };
    console.log(sineRenderer());
 
     //  we have an empty data array here, but use the "dataRenderer"
     //  option to tell the plot to get data from our renderer.
     //  这里我们第二个参数是空数组，但在第三个参数对象里面用了dataRenderer
     var  plot1  =  $.jqplot( ' chart1 ' ,[],{
        title:  ' Sine Data Renderer ' ,
        dataRenderer: sineRenderer
    });



     //  Our ajax data renderer which here retrieves a text file.
     //  it could contact any source and pull data, however.
     //  The options argument isn't used in this renderer.
     var  ajaxDataRenderer  =   function (url, plot, options) {
         var  ret  =   null ;
        $.ajax({
             //  have to use synchronous here, else the function 
             //  will return before the data is fetched
            async:  false ,
            url: url,
            dataType:  " json " ,
            success:  function (data) {
                ret  =  data;
            },
            error: function (){
                ret  =  [ 1 , 2 , 3 , 4 , 5 , 6 , 7 ];
            }
        });
         return  ret;
    };

     //  The url for our json data
     var  jsonurl  =   " jsondata.txt " ;
     debugger ;
     //  passing in the url string as the jqPlot data argument is a handy
     //  shortcut for our renderer.  You could also have used the
     //  "dataRendererOptions" option to pass in the url.
     var  plot2  =  $.jqplot( ' chart2 ' , jsonurl, {
        title:  " AJAX JSON Data Renderer " ,
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
            unusedOptionalUrl: jsonurl
        }
    });
});
</ script >
</ head >
< body >
     < div  id ="chart1" ></ div >
     < div  id ="chart2" ></ div >
</ body >
</ html >

 

 

--------------------------------------------------------------------------------

网上找的相关资料链接：

 

 

http://www.jqplot.com/

http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html