Use of Jqplot jquery drawing Plug-ins _jquery

Jqplot is a jquery drawing plug-in that can be used to make beautiful line and column charts. Jqplot supports setting various styles for a chart. Provide ToolTips, several points highlighting and other functions.

Official website: http://www.jqplot.com/

Here to contribute to the Chinese tutorial, basically all the APIs are very complete, for the needs of children's shoes to see, more important is as their own drop collection ~ ~ Oh yes ~

There are three locations that need to be configured for Jqplot. Format such as:

$.jqplot (' target ', data, options); target: the location to display. Data: Displayed. Options: Other Configurations

Seriescolors: ["#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],///default display category color, if the number of categories exceeds the number of colors here, assign a value from the first position in the queue to the appropriate category

Stackseries:false,//If set to true and has more than one polyline if it is a line chart, then the value of each category (Polyline) on the vertical axis is the sum of all the preceding category longitudinal axis values and their longitudinal, axis value addition value (eg, current classification The longitudinal axis value is Y3
Title: ',//Set the caption of the current diagram

  Title: {text: ',//Set the title of the current graph show:true,//set the title of the current graph to display}, Axesdefaults: {show:false, whether axes are automatically displayed. Min:null, transverse (longitudinal) axis Minimum scale value max:null, transverse (longitudinal) axis Maximum scale value pad:1.2, transverse (longitudinal) axis degree value increases the factor ticks: [],//sets the value on the scale of horizontal (vertical) coordinates, can be the The value in the Ticks array numberticks:undefined,//a division factor, which is used to set the horizontal (vertical) Coordinate scale interval, the horizontal (vertical) coordinate tick interval value = horizontal (longitudinal) coordinate interval length/(numberTicks-1) renderer: $.jqplo
      T.linearaxisrenderer,//Set up horizontal (vertical) axis data loading renderer rendereroptions: {},//SET option Configuration object for renderer, line chart does not need to set Tickoptions: {
      Mark: ' Outside ',//Set the scale on the axis display mode: Divided into: Axis display, inside display, and through the display, the value is ' outside ', ' inside ' or ' cross '. Showmark:true,//Set whether the tick showgridline:true is displayed,//whether the grid marksize:4 for the tick value orientation is displayed in the chart area,///tick mark points distance from the tick marks on the axis (pixel If Mark is ' Cross ', then each tick line has top and bottom vertices, tick marks and axes cross between tick marks, then this distance X2 show:true,//or whether tick marks are displayed, in the same direction as the tick marks  Gridlines, and the tick values on the axes showlabel:true,//whether to display tick marks and tick values on the axes formatstring: ',//Set scale value display format on axis, eg: '%b% #d,%Y ' presentation format ' month Day, year "," AUG 30,2008 "fontsize: ' 10px ', Font size for tick values fontFamily: ' Tahoma ', font angle:40 on tick value,//tick value and axis angle, angle axis clockwise fontweight: ' Normal ',//font thickness fontstretch:1//scale values are stretched (stretched) in the direction (outside the axis)} showticks:true,//Whether tick marks and tick values on the axis are displayed, Showtickma
      Rks:true,//Set whether to display the tick useseriescolor:true//If there are multiple vertical (horizontal) axes, set these axes to appear in different colors}, axes: {xaxis: { Same options as Axesdefaults}, YAxis: {//Same options as Axesdefaults}, X2axis: {//SA Me options as Axesdefaults}, Y2axis: {//Same options as Axesdefaults}, Seriesdefaults: {//IF
    Multiple classifications, which allows you to set the common properties of each category Show:true,//Set whether to render the entire chart area (that is, to display the contents of the chart).
    Xaxis: ' Xaxis ',//either ' Xaxis ' or ' x2axis '.
    YAxis: ' YAxis ',//either ' YAxis ' or ' y2axis '.
    Label: ',//the category name to display in the Category name box.
    Color: ',///The colour of the category in the icon (fold, histogram, etc.).
    linewidth:2.5,//category chart (especially line chart) which width.
    Shadow:true,//each diagram shows shaded areas in the chart.
    SHADOWANGLE:45,//reference grid in the same parameters. shadowoffset:1.25,Refer to the same parameters in the grid.
    Shadowdepth:3,//reference grid in the same parameters.
    shadowalpha:0.1,//Opacity of the shadow. Showline:true,//whether to display the polyline in the chart (polyline in a line chart) Showmarker:true,//whether to highlight the data node Fill:false in the diagram,//whether to fill the area under the line in the chart (fill Color with line color) and legend//Set category name box, note that if fill is true,//Then ShowLine must be true, the effect will not be displayed Filla Ndstroke:false,///in State where fill is true, display a line at the top of the fill area (if the polyline is the line chart) fillcolor:undefined,//Set the color of the fill area Fillalpha : Undefined,//stiles The transparency of the fill area renderer: $.jqplot. Pierenderer,///using the renderer (here is the pie chart Pierenderer) to render the existing chart//, and convert it to the desired chart rendereroptions: {},//to the rendering set to the previous property Option object for the line graph, the renderer for the wireframe has no option object,//Option configuration object for different graphs see the configuration of each chart in the "option object settings for each of the different Plug-ins"/Jqplot below tion object markerrenderer: $.jqplot. 
    Markerrenderer,//renderer to the draw of the data/point markers. Markeroptions: {show:true,//whether to display data points in the diagram style: ' filledcircle ',//The way each data point is displayed in the diagram, the default is "Filledcircle" (solid dot),//Other several ways Circle,diamond, square, Filledcircle, 
      Filleddiamond or Filledsquare.  
      Linewidth:2,//Count the width of each edge of the position (if set too large, each side will repeat, will show similar to a solid point) size:9,//number of points of size color: ' #666666 '//number of positions color Shadow:true,//whether to display shaded areas for data points (add stereo effect) shadowangle:45,//shaded area angle, x axis clockwise shadowoffset:1,//reference GR ID in the same parameter shadowdepth:3,//reference grid in the same parameters shadowalpha:0.07//reference grid in the same parameters} isdragable:true,//is acceptable Allow drag (if Dragable package is introduced), default drag}, series:[//If there are multiple categories to display, this sets the related configuration properties//eg for each category. Sets the category name for each category in the Category Name box//[label: ' Tra PS Division '},{label: ' Decoy Division '},{label: ' Harmony Division '}]//configuration Parameters set with Seriesdefaults], legend: {Show:false  ,//sets whether the Category name box (that is, the name of all categories appears somewhere in the diagram) Location: ' NE ',///Category name box appears in position, NW, N, NE, E, SE, S, SW, W. Xoffset:12,// Category name box distance from top border of chart area (unit px) yoffset:12,//Category name box distance to the left border of chart area (in px) background: '//Category name box from chart areaField background color textcolor: '//category name box from font color in chart area}, grid: {drawgridlines:true,//wether to draw lines across 
    The grid or not.   GridlineColor: ' #cccccc '//Set the color of the entire icon area grid background background: ' #fffdf6 ',//Set the background color of the entire chart area bordercolor: ' #999999 ', 
    Set the color of the (borderwidth:2.0) border of the chart,//Set the (most lateral) border width shadow:true,//Set the shadow for the entire icon (most outer) border to highlight its stereo effect       SHADOWANGLE:45,//Set the angle of the shaded area, rotate the shadowoffset:1.5 clockwise from the x-axis,//set the distance from the shadow area to the border of the picture Shadowwidth:3, Sets the width of the shaded area shadowdepth:3//sets the number of overlapping shadows in the AV area shadowalpha:0.07//Set the opacity of the shaded area renderer: $.JQPL Ot. 
    Canvasgridrenderer,//renderer to the draw the grid. Rendereroptions: {}//options to the renderer. 
  Note, the default//Canvasgridrenderer takes no additional options. //jqplot the Option object Settings//barrenderer (option object for histogram)//The option object is applicable to the series and seriesdefault genus of the columnar graphs The related configuration object settings for sex are seriesdefaults: {rendereroptions: {barpadding:8,//Set the distance (px) barmargin:10 between two bars of the same category,//Set the distance (px) between two bars of different classifications ( 
      On the same horizontal coordinate table point) bardirection: ' Vertical ',//set the direction of the histogram display: Vertical display and horizontal display//, default vertical display vertical or horizontal. 
      Barwidth:null,//Set the width of each column in the histogram shadowoffset:2,///the same property set in the grid Shadowdepth:5,//same property settings as grid shadowalpha:0.8,///the same property settings as the grid},//Cursor (cursor)//mouse movement in the diagram, the mouse in the diagram display form, often with the highlight function//In addition, by setting the genus Zoom related attributes to drill through a region of a graph (zoom in on the selected area)//The configuration object is configured directly under option cursor: {style: ' crosshair ',//When the mouse is moved to the picture, the mouse display style, the property value is CSS Class Show:true,//whether to display the cursor showtooltip:true,//whether to display the prompt InfoBar Followmouse:false,///cursor's prompt Information Bar to move with the cursor (mouse) Move tooltiplocation: ' se ',///cursor Tip Information Bar position settings. If followmouse=true, the position is relative to the position of the cursor. 
    Otherwise, for the position of the cursor Information Bar in the icon//optional value for the attribute: N, NE, E, se, etc. Tooltipoffset:6,//hint info The position of the mouse (followmouse=true) or axis (Followmouse=false) SHOWTOOLTIPGRidposition:false,//whether to display the cursor position in the InfoBar (with the pixel distance of the icon's left and top edge lines) showtooltipunitposition:true,//whether to display the InfoBar where the cue cursor is located (the data value on the vertical axis) Note: Note that this is distinguished from the showtooltipgridposition value, which displays the coordinate value, where the data value is displayed tooltipformatstring: '%.4p ',//highlighter Toolt Ipformatstring useaxesformatters:true,//tooltipformatstring tooltipaxesgroups with highlighter: [],//show on Ly specified axes groups in ToolTip. Would specify like://[[' Xaxis ', ' YAxis '], [' Xaxis ', ' Y2axis ']]. 
     
  By default, all axes//combinations with the series in the plot are shown. },//dragable (drag)//The Configuration object is configured through Seriesdefaults and series configuration seriesdefaults: {dragable: {color:undefine D,//when dragging the data point is, drag the line and drag the data point color Constrainto: ' None ',//set the range of the drag: ' X ' (can only be dragged horizontally),//' Y ' (can only be dragged vertically), or 
   ' None ' (unrestricted). },},//highlighter (highlighted)//Set Highlight Action Option Property object//mouse move to a data point, the data point increases and displays the message box//The Configuration object is configured directly under option Highlig Hter: {Linewidthadjust:2.5,///When the mouse is moved to a magnified data point, set the width of the increased data point//currently only for non-solid data points sizeadjust:5,//When mouse When you move to a data point, the increment increment of the data point showtooltip:true,//whether to display the prompt Information Bar tooltiplocation: ' NW ',///hint information display position (first letter in English direction): N, NE, E, S 
    E, S, SW, W, NW. Fadetooltip:true,//Set the way the cue InfoBar appears and disappears (whether to fade in) Tooltipfadespeed: "Fast"//Set the speed of the hint InfoBar fade: Slow, Def, fast, or a value of a millisecond number 
    . 
    Tooltipoffset:2,//The Tip InfoBar is offset by the highlighted data points in pixels. 
          Tooltipaxes: ' Both ',//Cue message box displays the value on that axis of the data point, there are currently three ways of horizontal/vertical/horizontal longitudinal. 
    Values are x, y, or XY respectively. Tooltipseparator: ', '///Tip infobar the interval between different values symbol USEAXESFORMATTERS:TRUE//Hint information box in the format of the data displayed in the same format as the data on the axis Tooltipforma Tstring: '%.5p '//for setting the format of the data display in the Hint message box, if Useaxesformatters//is false. The data format is no longer consistent with the axes of the information balloon, but it is the same as//at the same time, the property also supports HTML format Strings//eg: ' <b><i><span St Yle= "color:red;" mce_style= "color:red;" >hello</span></i></b>%.2f '},//Logaxisrenderer (meansNumber renderer)//The renderer has only two properties, and the exponential renderer is configured via Axesdefaults and Axes configuration objects Axesdefaults: {base:10,//index base TICKDISTR Ibution: ' Even ',//Axis display mode: ' Even ' or ' power '. ' Even ' produces a coordinate scale value evenly distributed on the coordinate//axis. and ' power ' is based on increasing numbers to determine the scale on the axis,//pierenderer (option object to set pie chart)//pie chart is configured with Seriesdefaults and series configuration Objects Seriesd Efaults: {rendereroptions: {diameter:undefined,//Set the diameter of the pie padding:20,//pie distance from its category name box or chart border, disguised as The diameter of the table cake slicemargin:20,//the distance between each part of the pie fill:true,//Set the status shadow:true of each portion of the pie, or the border of each part of the pie   Place the shadow to highlight its stereo effect shadowoffset:2,//Set the distance shadowdepth:5 the shadow area offsets each part of the pie,//Set the depth of the shadow area shadowalpha:0.07 Set the opacity of the shaded area},//pointlabels (data point label)///for displaying relevant information (not a prompt box nature) at the location of the data point seriesdefaults: {pointlabels: 
  {location: ' s ',//The data label shows the azimuth Ypadding:2//data label distance from the data point to the longitudinal axis in the direction of the data point}} Trendline (trendline)//pie charts are configured with Seriesdefaults and series configuration Objects Seriesdefaults: {trendline: {show:true,//Show trendline color: ' #666666 ',//Trendline colors Label: ',//trendline name Type: ' linear ',//trendline type ' linear ' (straight line), ' exponential ' (Power number line) or ' exp ' shadow:true,//Same as grid property set Li newidth:1.5,//Trendline width shadowangle:45,//same property set shadowoffset:1.5 with grid,//same property settings as Grid SHADOWDEP

 Th:3,//Same as grid property set shadowalpha:0.07//Grid same property setting}}

The above is the entire content of this article, I hope to help everyone, but also hope that we support the cloud-dwelling community.