jqplot总结

<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title >line-charts </ title >
< link rel ="stylesheet" type ="text/css" href ="jquery.jqplot.css" />

< 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 >

<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title >axis Label Test </ title >
< link rel ="stylesheet" type ="text/css" href ="jquery.jqplot.css" />

< 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 >

<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title >rotated-tick-labels </ title >
< link rel ="stylesheet" type ="text/css" href ="jquery.jqplot.css" />

< 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 >

<! DOCTYPE html >
< html >
< head >
< meta charset ="utf-8" />
< title >rotated-tick-labels </ title >
< link rel ="stylesheet" type ="text/css" href ="jquery.jqplot.css" />

< 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 >

免责声明！