当然想拿实例也勾勒到上篇博客里,最后发现无限长了,拆成稀首博客了。

实例来源于官方文档:http://www.jqplot.com/tests/

旋即首博客主要是翻译了法定文档关于经典实例的解释,并当相应代码中上加注。

形容及尾的时段,感觉有硌心不在焉,如果出错误,或者押无理解的,欢迎留言。

Line charts, scatter plots and series options(线图,散点图及千家万户选)

该型图表可能凭借让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

 

大多数为主的jqPlot图表是因同样多样数据绘制出同长线。没有选择需要提供。数据是同雨后春笋数组,它可以是y值组成的累组,也得以是[x,y]做的数组。如果只是发生y值,x值将受机关赋值,1,2,3,4…

脚是图不需要另插件

图片 1

$(document).ready(function(){
    var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

 

脚是图片使用了有抉择来装标题,添加轴标签,并展示了何等用canvasAxisLabelRenderer插件来供旋转轴标签。

图片 2

$(document).ready(function(){
  var plot2 = $.jqplot ('chart1', [[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的渲染器
        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: 0
        },
        yaxis: {
          label: "Y Axis"
        }
      }
    });
}); 

 

下的事例使用了累累线条样式选项来决定线条与符号显示

图片 3

 

$(document).ready(function(){
  // Some simple loops to build up data arrays.
  var cosPoints = [];
  // 获取cos(i)的值,i的间隔为0.4
  for (var i=0; i<2*Math.PI; i+=0.4){ 
    cosPoints.push([i, Math.cos(i)]); 
  }

  var sinPoints = [];
  // 获取sin(i)的值,i的间隔为0.4
  for (var i=0; i<2*Math.PI; i+=0.4){ 
     sinPoints.push([i, 2*Math.sin(i-.8)]); 
  }

  var powPoints1 = []; 
  // 获取2.5+(i/4)^2的值,i的间隔为0.4
  for (var i=0; i<2*Math.PI; i+=0.4) { 
      powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
  }

  var powPoints2 = [];
  // 获取-2.5-(i/4)^2的值,i的间隔为0.4
  for (var i=0; i<2*Math.PI; i+=0.4) { 
      powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
  } 

  var plot3 = $.jqplot('chart1', [cosPoints, sinPoints, powPoints1, powPoints2], 
    { 
      title:'Line Style Options', 
      // Series options are specified as an array of objects, one object
      // for each series.
      // 配置要绘制的线的参数
      series:[ 
          {
            // Change our line width and use a diamond shaped marker.
            // 设置线宽为2px
            lineWidth:2, 
            // 设置点的标记为空心菱形
            markerOptions: { style:'dimaond' }
          }, 
          {
            // Don't show a line, just show markers.
            // Make the markers 7 pixels with an 'x' style
            // 设置不显示线
            showLine:false, 
            // 设置点用符号x表示,大小为7px
            markerOptions: { size: 7, style:"x" }
          },
          { 
            // Use (open) circlular markers.
            // 设置点的标记为空心圆
            markerOptions: { style:"circle" }
          }, 
          {
            // Use a thicker, 5 pixel line and 10 pixel
            // filled square markers.
            // 设置线宽为5px
            lineWidth:5, 
            // 设置点的标记为实心正方形
            markerOptions: { style:"filledSquare", size:10 }
          }
      ]
    }
  );
});

 

Axis Labels and label options(坐标轴标签和标签选项)

该档图表可能凭借让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

 

jqPlot通过每个坐标轴的label选项配置为标轴的竹签。默认的label渲染器在div标签中开创labels。这使得以各级一个label完全给CSS控制。labels被授予的css类名是””jqplot-axis_name-label”,其中”axis_name”是xaxis,
yaxis等。

图片 4

 

$(document).ready(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'
        }
      }
  });
});

 

通过包含”jqplot.canvasTextRenderer.min.js”和”jqplot.canvasAxisLabelRenderer.min.js”插件,可以一直将label文本渲染到canvas元素上。这吗允许文本旋转,而且y轴上之价签会默认旋转90过。默认情况下,标签将以Hershey字体。最新的浏览器(包括IE
9)都支持于打布元素原生文本渲染。

图片 5

$(document).ready(function(){
  var cosPoints = []; 
  for (var i=0; i<2*Math.PI; i+=0.1){ 
     cosPoints.push([i, Math.cos(i)]); 
  } 
  var plot2 = $.jqplot('chart1', [cosPoints], {  
      series:[{showMarker:false}],
      axes:{
        xaxis:{
          label:'Angle (radians)',
          // 设置渲染器为CanvasAxisLabelRenderer
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        yaxis:{
          label:'Cosine',
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        }
      }
  });
});

 

只要访问者使用浏览器支持地方canvas字体,他们见面看到下图表中之label被渲染为12px之Georgia字体(或他们之网的默认字体,当Georgia字体不可用时)。如果他们的浏览器不支持,他们用张默认的Hershey字体。

图片 6

$(document).ready(function(){
  var cosPoints = []; 
  for (var i=0; i<2*Math.PI; i+=0.1){ 
     cosPoints.push([i, Math.cos(i)]); 
  } 
  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'
          }
        }
      }
  });
});

 

Axis Tick Labels and rotated text(坐标轴刻度标签和转文本)

该档图表可能凭借让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>

 

坐标轴转动刻度标签是可以通过”jqplot.canvasTextRenderer.min.js”和”jqplot.canvasAxisTickRenderer.min.js”插件实现。本地canvas字体渲染能力让用当支持的浏览器。这包括大部分新颖的浏览器(包括IE
9)。在不支持原生的写布字体文本浏览器,文本下Hershey的书。

图片 7

$(document).ready(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: {
        // 设置tick的渲染器为CanvasAxisTickRenderer
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          // 字体旋转-30度
          angle: -30,
          fontSize: '10pt'
        }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
      }
    }
  });
});

 

 

为了有利于比较,这里是平之图,不同的”fontFamily”。如果你的浏览器支持,你可知见到标签字体的距离。

图片 8

 

$(document).ready(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 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
      }
    }
  });
});

 

默认的永恒为主坐标轴或软为标轴以及旋转标签用以确保标签对适当的柱状或刻度位置。

此还要小心在Y轴的”autoscale”选项的施用。

图片 9

 

$(document).ready(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 line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], 
  ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];

  var plot2 = $.jqplot('chart2', [line1, line2], {
    series:[{renderer:$.jqplot.BarRenderer}, {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
      }
    }
  });
});

得经过点名的LabelPosition的’start’,
‘middle’或’end’覆盖默认的职。默认为”auto”设置。

图片 10

$(document).ready(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 plot3 = $.jqplot('chart1', [line1], {
    title: 'Concern vs. Occurrance',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          angle: -30
        }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickOptions: {
          // 设置tick的label位置在中间
          labelPosition: 'middle'
        }
      },
      yaxis: {
        autoscale:true,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          // 设置tick的label位置在前边
          labelPosition: 'start'
        }
      }
    }
  });
});

 

AJAX, JSON data loading and external plot data functions(Ajax,JSON数据加载与表面数据绘图功能)

拖欠品种图表可能乘让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.json2.min.js"></script>

数量渲染器允许jqPlot从表面源(例如执行一个AJAX调用一个函数)中提取数据。外部源简单的以图片选项分配为”dataRenderer”。数据渲染之唯一要求凡,它必须回到一个卓有成效jqPlot数据数组。

图片 11

$(document).ready(function(){
  // Our data renderer function, returns an array of the form:
  // [[[x1, sin(x1)], [x2, sin(x2)], ...]]
  // 自定义dataRenderer,返回一个有效数组
  var sineRenderer = function() {
    var data = [[]];
    for (var i=0; i<13; i+=0.5) {
      data[0].push([i, Math.sin(i)]);
    }
    return data;
  };

  // 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
  });
});

 

下的例子展示了一个重复杂的例证,它使AJAX从表面JSON数据源中取数据。

图片 12

 

$(document).ready(function(){
  // 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,
      // 数据类型是json
      dataType:"json",
      // AJAX成功后调用
      success: function(data) {
        ret = data;
      }
    });
    return ret;
  };

  // The url for our json data
  var jsonurl = "./jsondata.txt";

  // 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('chart1', jsonurl,{
    title: "AJAX JSON Data Renderer",
    dataRenderer: ajaxDataRenderer,
    dataRendererOptions: {
      // 传递url参数到dataRenderer中
      unusedOptionalUrl: jsonurl
    }
  });
});

 

jsondata.txt

[[1, 3, 2, 4, 6, 9]]

 

Data point highlighting and mouse cursor tracking(数据点的高亮显示与鼠标光标跟踪)

欠类型图表可能靠让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>

 

高亮插件将崛起鼠标附近的数据点和展示一个可选有数据值的提拔。默认情况下,提示的数据值将和坐标轴刻度值格式化为相同之格式。文本格式可以自定义格式字符串。

图片 13

$(document).ready(function(){
  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
  var plot1 = $.jqplot('chart1', [line1], {
      title:'Data Point Highlighting',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            // x轴刻度标签格式化为月日,如: May 1
            formatString:'%b&nbsp;%#d'
          } 
        },
        yaxis:{
          tickOptions:{
            // y轴刻度标签格式化为带两位小数的美元数,如: $500.00
            formatString:'$%.2f'
            }
        }
      },
      highlighter: {
        // 是否高亮显示
        show: true,
        // 当鼠标移动到数据点上时,数据点扩大的增量增量
        sizeAdjust: 7.5
      },
      cursor: {
        // 是否显示光标,若为true,光标默认为十字
        show: false
      }
  });
});

 

光标插件改变鼠标光标,当其进入图形区域,将显得一个鼠标位置的唤起。提示可以是在一个永恒的岗位,或者它可以跟鼠标移动。该指针的体,默认设置为什字,也可于定义指针样式。提示值的格式类似高亮插件。默认情况下,他们所使用轴的格式化方式,但得定制。

图片 14

 

$(document).ready(function(){
  var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
  var plot2 = $.jqplot('chart1', [line1], {
    title:'Mouse Cursor Tracking',
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b&nbsp;%#d'
          }
      },
      yaxis:{
        tickOptions:{
          formatString:'$%.2f'
        }
      }
    },
    highlighter: {
      show: false
    },
    cursor: {
      // 显示光标,光标默认为十字
      show: true,
      // 提示的位置在左下角
      tooltipLocation:'sw'
    }
  });
});

 

 Candlestick and Open Hi Low Close charts(蜡杆图表和美国线便OHLC图表)

拖欠型图表可能靠让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.ohlcRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.highlighter.min.js"></script>

 

 OHLC,HLC和K线图是运$.jqplot.OHLCRenderer插件创建的。下面的图利用高亮插件,当鼠标移了一个数据点,它会来得一个定制的提拔。

 图片 15

$(document).ready(function(){
  // Note, the ohlc data is specified below
  // 其中的ohlc数据会在下面展示 
  var plot1 = $.jqplot('chart1',[ohlc],{
    // use the y2 axis on the right of the plot 
    //rather than the y axis on the left.
    // 选择y轴为y2axis,位于图表右侧
    seriesDefaults:{yaxis:'y2axis'},
    axes: {
      xaxis: {
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{formatString:'%b %e'}, 
        // For date axes, we can specify ticks options as human 
        // readable dates.  You should be as specific as possible, 
        // however, and include a date and time since some 
        // browser treat dates without a time as UTC and some 
        // treat dates without time as local time.
        // Generally, if  a time is specified without a time zone,
        // the browser assumes the time zone of the client.
        // 用时间做x轴,min代表开始时间,max代表结束时间
        min: "09-01-2008 16:00",
        max: "06-22-2009 16:00",
        // 每两个刻度之间的时间长度是6个周
        tickInterval: "6 weeks",
      },
      y2axis: {
        tickOptions:{formatString:'$%d'}
      }
    },
    // 使用OHLCRenderer渲染器
    series: [{renderer:$.jqplot.OHLCRenderer}],
    highlighter: {
      show: true,
      // 不显示数据点的标记
      showMarker:false,
      showTooltip: true,
      // 提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式,值分别为 x, y, xy or both
      tooltipAxes: 'both',
      yvalues: 4,
      // You can customize the tooltip format string of the highlighter
      // to include any arbitrary text or html and use format string
      // placeholders (%s here) to represent x and y values.
      // 提示的样式定义
      formatString:'<table class="jqplot-highlighter"> \
      <tr><td>date:</td><td>%s</td></tr> \
      <tr><td>open:</td><td>%s</td></tr> \
      <tr><td>hi:</td><td>%s</td></tr> \
      <tr><td>low:</td><td>%s</td></tr> \
      <tr><td>close:</td><td>%s</td></tr></table>'
    }
  });
});

 

 图片 16

$(document).ready(function(){            
  var plot2 = $.jqplot('chart2',[ohlc],{
    seriesDefaults:{yaxis:'y2axis'},
    axes: {
      xaxis: {
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{formatString:'%b %e'}, 
        min: "09-01-2008",
        max: "06-22-2009",
        tickInterval: "6 weeks",
      },
      y2axis: {
        tickOptions:{formatString:'$%d'}
      }
    },
    // To make a candle stick chart, set the "candleStick" option to true.
    // 添加参数,设置为candleStick
    series: [
      {
        renderer:$.jqplot.OHLCRenderer, 
        rendererOptions:{ candleStick:true }
      }
    ],
    highlighter: {
      show: true,
      showMarker:false,
      tooltipAxes: 'xy',
      yvalues: 4,
      formatString:'<table class="jqplot-highlighter"> \
      <tr><td>date:</td><td>%s</td></tr> \
      <tr><td>open:</td><td>%s</td></tr> \
      <tr><td>hi:</td><td>%s</td></tr> \
      <tr><td>low:</td><td>%s</td></tr> \
      <tr><td>close:</td><td>%s</td></tr></table>'
    }
  });
});

 

前的图使用下的数码集。
jqPlot将分析最容易读的日期格式。它始终是无比安全的,但是,通过一个日期作为JavaScript时间穿要于用jqPlot解析一个随意的日期字符串更客观。

var ohlc = [
  ['06/15/2009 16:00:00', 136.01, 139.5, 134.53, 139.48],
  ['06/08/2009 16:00:00', 143.82, 144.56, 136.04, 136.97],
  ['06/01/2009 16:00:00', 136.47, 146.4, 136, 144.67],
  ['05/26/2009 16:00:00', 124.76, 135.9, 124.55, 135.81],
  ['05/18/2009 16:00:00', 123.73, 129.31, 121.57, 122.5],
  ['05/11/2009 16:00:00', 127.37, 130.96, 119.38, 122.42],
  ['05/04/2009 16:00:00', 128.24, 133.5, 126.26, 129.19],
  ['04/27/2009 16:00:00', 122.9, 127.95, 122.66, 127.24],
  ['04/20/2009 16:00:00', 121.73, 127.2, 118.6, 123.9],
  ['04/13/2009 16:00:00', 120.01, 124.25, 115.76, 123.42],
  ['04/06/2009 16:00:00', 114.94, 120, 113.28, 119.57],
  ['03/30/2009 16:00:00', 104.51, 116.13, 102.61, 115.99],
  ['03/23/2009 16:00:00', 102.71, 109.98, 101.75, 106.85],
  ['03/16/2009 16:00:00', 96.53, 103.48, 94.18, 101.59],
  ['03/09/2009 16:00:00', 84.18, 97.2, 82.57, 95.93],
  ['03/02/2009 16:00:00', 88.12, 92.77, 82.33, 85.3],
  ['02/23/2009 16:00:00', 91.65, 92.92, 86.51, 89.31],
  ['02/17/2009 16:00:00', 96.87, 97.04, 89, 91.2],
  ['02/09/2009 16:00:00', 100, 103, 95.77, 99.16],
  ['02/02/2009 16:00:00', 89.1, 100, 88.9, 99.72],
  ['01/26/2009 16:00:00', 88.86, 95, 88.3, 90.13],
  ['01/20/2009 16:00:00', 81.93, 90, 78.2, 88.36],
  ['01/12/2009 16:00:00', 90.46, 90.99, 80.05, 82.33],
  ['01/05/2009 16:00:00', 93.17, 97.17, 90.04, 90.58],
  ['12/29/2008 16:00:00', 86.52, 91.04, 84.72, 90.75],
  ['12/22/2008 16:00:00', 90.02, 90.03, 84.55, 85.81],
  ['12/15/2008 16:00:00', 95.99, 96.48, 88.02, 90],
  ['12/08/2008 16:00:00', 97.28, 103.6, 92.53, 98.27],
  ['12/01/2008 16:00:00', 91.3, 96.23, 86.5, 94],
  ['11/24/2008 16:00:00', 85.21, 95.25, 84.84, 92.67],
  ['11/17/2008 16:00:00', 88.48, 91.58, 79.14, 82.58],    
  ['11/10/2008 16:00:00', 100.17, 100.4, 86.02, 90.24],
  ['11/03/2008 16:00:00', 105.93, 111.79, 95.72, 98.24],
  ['10/27/2008 16:00:00', 95.07, 112.19, 91.86, 107.59],
  ['10/20/2008 16:00:00', 99.78, 101.25, 90.11, 96.38],
  ['10/13/2008 16:00:00', 104.55, 116.4, 85.89, 97.4],
  ['10/06/2008 16:00:00', 91.96, 101.5, 85, 96.8],
  ['09/29/2008 16:00:00', 119.62, 119.68, 94.65, 97.07],
  ['09/22/2008 16:00:00', 139.94, 140.25, 123, 128.24],
  ['09/15/2008 16:00:00', 142.03, 147.69, 120.68, 140.91]
];

 Pie and Donut Charts(饼状图及环形图)

 该型图表可能凭借让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.donutRenderer.min.js"></script>

 

 图片 17

$(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
      seriesDefaults: {
        // Make this a pie chart.
        // 设置绘制一个饼状图
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          // 展示饼块的数据
          showDataLabels: true
        }
      }, 
      // 展示图标,在图标的右侧
      legend: { show:true, location: 'e' }
    }
  );
});

 

 图片 18

$(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot2 = jQuery.jqplot ('chart2', [data], 
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Turn off filling of slices.
          // 设置不填充饼块
          fill: false,
          showDataLabels: true, 
          // Add a margin to seperate the slices.
          // 饼块之间的距离为4px
          sliceMargin: 4, 
          // stroke the slices with a little thicker line.
          // 饼块的线宽为5px
          lineWidth: 5
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

 

 环形图与饼状图的布局起几乎如出一辙。

图片 19

$(document).ready(function(){
  var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
  var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

  var plot3 = $.jqplot('chart3', [s1, s2], {
    seriesDefaults: {
      // make this a donut chart.
      // 设置绘制一个环形图
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
        // Donut's can be cut into slices like pies.
        // 环块之间的距离为3px
        sliceMargin: 3,
        // Pies and donuts can start at any arbitrary angle.
        // 起始位置为-90度,x轴正方向为0度
        startAngle: -90,
        showDataLabels: true,
        // By default, data labels show the percentage of the donut/pie.
        // You can show the data 'value' or data 'label' instead.
        // 可以设置在环块上显示的是数值还是标签
        dataLabels: 'value'
      }
    }
  });
});

 

 Bar charts(柱状图)

 该种图表可能指让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script>

 

 图片 20

$(document).ready(function(){
    var s1 = [200, 600, 700, 1000];
    var s2 = [460, -210, 690, 820];
    var s3 = [-260, -440, 320, 200];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    // 定义x轴的刻度数组,需与数据相对应
    var ticks = ['May', 'June', 'July', 'August'];

    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            // 强制填充到0值
            rendererOptions: {fillToZero: true}
            // 若使用fillToValue,则可设置填充到的数值
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        // 设置三条数据的标识label,依次对应
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            // 设置标识在图表外,元素内(在canvas内)
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            // x轴使用CategoryAxisRenderer渲染器
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    });
});

 

 图片 21

$(document).ready(function(){
    // For horizontal bar charts, x an y values must will be "flipped"
    // from their vertical bar counterpart.
    var plot2 = $.jqplot('chart2', [
        [[2,1], [4,2], [6,3], [3,4]], 
        [[5,1], [1,2], [3,3], [4,4]], 
        [[4,1], [7,2], [1,3], [2,4]]], {
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            // Show point labels to the right ('e'ast) of each bar.
            // edgeTolerance of -15 allows labels flow outside the grid
            // up to 15 pixels.  If they flow out more than that, they 
            // will be hidden.
            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
            // Rotate the bar shadow as if bar is lit from top right.
            // 柱块的阴影角度为135度
            shadowAngle: 135,
            // Here's where we tell the chart it is oriented horizontally.
            // 设置为水平柱状图
            rendererOptions: {
                barDirection: 'horizontal'
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});

 

 点击图片更新文本

图片 22

$(document).ready(function(){
  var s1 = [2, 6, 7, 10];
  var s2 = [7, 5, 3, 4];
  var s3 = [14, 9, 3, 8];
  plot3 = $.jqplot('chart3', [s1, s2, s3], {
    // Tell the plot to stack the bars.
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          // 柱之间间距为30px
          barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
          // 当鼠标按下时,高亮
          highlightMouseDown: true   
      },
      pointLabels: {show: true}
    },
    axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        // Don't pad out the bottom of the data range.  By default,
        // axes scaled as if data extended 10% above and below the
        // actual range to prevent data points right on grid boundaries.
        // Don't want to do that here.
        // 填充,以延长数据界限以下的范围内。
        // 该数据范围的底部被乘以该因子,以确定最小轴界限。 
        // 0值将被解释为无填充,并将padmin设置为1.0 。
        padMin: 1
      }
    },
    legend: {
      show: true,
      location: 'e',
      placement: 'outside'
    }      
  });
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
  // 绑定到"jqplotDataClick"时间
  $('#chart3').bind('jqplotDataClick', 
    function (ev, seriesIndex, pointIndex, data) {
      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    }
  ); 
});

 

Bubble plots(气泡图)

 该类型图表可能靠让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.bubbleRenderer.min.js"></script>

气泡图表示3维数目。首先,一个着力的气泡图用”bubbleGradients:true”选项来指定渐变填充。径向渐变不支持IE浏览器9之前的IE版本,将活动禁用。

图片 23

$(document).ready(function(){

    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];

    var plot1 = $.jqplot('chart1',[arr],{
        title: 'Bubble Chart with Gradient Fills',
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
                bubbleGradients: true
            },
            shadow: true
        }
    });
});

 

数据传递到一个气泡图是同多重的[x, y, radius, <label or
object>]。的数据点的可选的季独因素得以是凭一个标签字符串或持有’label’和/或’color’属性指定到气泡中之对象。

默认情况下,所有的泡泡都因绘图区的轻重缓急进行缩放。在数据点的半径值将受调动,以适应图表中的气泡。如果”autoscaleBubbles”选项被装置也假,在数量被的半径的价值将吃当作点之半径值。

产一致步是气泡采用了”bubbleAlpha”和”highlightAlpha”选项实现了部分骨干的自定义。

图片 24

$(document).ready(function(){

    var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
    [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
    [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];

    var plot2 = $.jqplot('chart2',[arr],{
        title: 'Transparent Bubbles',
        seriesDefaults:{
            renderer: $.jqplot.BubbleRenderer,
            rendererOptions: {
                // 气泡透明度为0.6
                bubbleAlpha: 0.6,
                // 高亮显示的透明度为0.8
                highlightAlpha: 0.8
            },
            shadow: true,
            // 阴影透明度为0.05
            shadowAlpha: 0.05
        }
    });    
});

 

当底下的言传身教中,自定义tooltip和一个自定义表传奇高亮显示为绑定到”jqplotDataHighlight”和”jqplotDataUnhighlight”事件的实行。自定义图例表这里是动态基于jQuery创建。

图片 25

$(document).ready(function(){

  var arr = [[11, 123, 1236, "Acura"], [45, 92, 1067, "Alfa Romeo"], 
  [24, 104, 1176, "AM General"], [50, 23, 610, "Aston Martin Lagonda"], 
  [18, 17, 539, "Audi"], [7, 89, 864, "BMW"], [2, 13, 1026, "Bugatti"]];

  var plot1b = $.jqplot('chart1b',[arr],{
    title: 'Tooltip and Custom Legend Highlighting',
    seriesDefaults:{
      renderer: $.jqplot.BubbleRenderer,
      rendererOptions: {
        bubbleAlpha: 0.6,
        highlightAlpha: 0.8,
        showLabels: false
      },
      shadow: true,
      shadowAlpha: 0.05
    }
  });

  // Legend is a simple table in the html.
  // Dynamically populate it with the labels from each data value.
  $.each(arr, function(index, val) {
    $('#legend1b').append('<tr><td>'+val[3]+'</td><td>'+val[2]+'</td></tr>');
  });

  // Now bind function to the highlight event to show the tooltip
  // and highlight the row in the legend. 
  $('#chart1b').bind('jqplotDataHighlight', 
    function (ev, seriesIndex, pointIndex, data, radius) {    
      var chart_left = $('#chart1b').offset().left,
        chart_top = $('#chart1b').offset().top,
        x = plot1b.axes.xaxis.u2p(data[0]),  // convert x axis unita to pixels
        y = plot1b.axes.yaxis.u2p(data[1]);  // convert y axis units to pixels
      var color = 'rgb(50%,50%,100%)';
      $('#tooltip1b').css({left:chart_left+x+radius+5, top:chart_top+y});
      $('#tooltip1b').html('' + data[3] + '<br />' + 'x: ' + data[0] + 
      '<br />' + 'y: ' + data[1] + '<br />' + 'r: ' + data[2]);
      $('#tooltip1b').show();
      $('#legend1b tr').css('background-color', '#ffffff');
      $('#legend1b tr').eq(pointIndex+1).css('background-color', color);
    });

  // Bind a function to the unhighlight event to clean up after highlighting.
  $('#chart1b').bind('jqplotDataUnhighlight', 
      function (ev, seriesIndex, pointIndex, data) {
          $('#tooltip1b').empty();
          $('#tooltip1b').hide();
          $('#legend1b tr').css('background-color', '#ffffff');
      });
});

 

Date Axes(时间轴)

 该项目图表可能因让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>

 

日子轴的支持是经过dateAxisRenderer插件提供。时间轴扩展于JavaScript原生的时日拍卖。这允许日期为其他明显的款型输入,而休只是是因毫秒为单位!

瞩目,虽然jqPlot将分析几乎有的人类可读之日子,它是无与伦比安全的还是采用JavaScript的日穿。还有,最好是指定日期及时,而未一味是一个独门的日子。这是由于浏览器处理地方时间与UTC不雷同致的。

图片 26

 

$(document).ready(function(){
  var line1=[['2008-09-30 4:00PM',4], ['2008-10-30 4:00PM',6.5], ['2008-11-30 4:00PM',5.7], ['2008-12-30 4:00PM',9], ['2009-01-30 4:00PM',8.2]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'Default Date Axis',
    axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},
    series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});

 

光阴轴还提供了劲的格式化功能。可以运用从定义格式化字符串格式化坐标轴刻度标签。

图片 27

 

$(document).ready(function(){
  var line1=[['2008-06-30 8:00AM',4], ['2008-7-30 8:00AM',6.5], ['2008-8-30 8:00AM',5.7], ['2008-9-30 8:00AM',9], ['2008-10-30 8:00AM',8.2]];
  var plot2 = $.jqplot('chart2', [line1], {
      title:'Customized Date Axis', 
      gridPadding:{right:35},
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d, %y'},
          min:'May 30, 2008', 
          tickInterval:'1 month'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});

 

Data Point
Labels(数据点标签)

 该项目图表可能乘让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script>

 

pointLabels插件放置于图及记的数据点的职。
标签可以应用同样系列之多寡数组或一个独立的价签数组。如果使用的序列数据,该数据点中的末尾一个价是默认用作标签。

图片 28

$(document).ready(function(){
  var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
  var plot1 = $.jqplot('chart1', [line1], {
      title: 'Chart with Point Labels', 
      seriesDefaults: { 
        showMarker:false,
        pointLabels: { show:true } 
      }
  });
});

 

叠加数据可为补加到该系列,它以于用来标签。如果欲格外的多寡为提供,每个数据点必须还发该标签的价值,即使它是null。

图片 29

$(document).ready(function(){
  var line1 = [[-12, 7, null], [-3, 14, null], [2, -1, '(low)'], 
      [7, -1, '(low)'], [11, 11, null], [13, -1, '(low)']];
  var plot2 = $.jqplot('chart2', [line1], {
    title: 'Point Labels From Extra Series Data', 
    seriesDefaults: {
      showMarker:false, 
      pointLabels:{ show:true, location:'s', ypadding:3 }
    },
    axes:{ yaxis:{ pad: 1.3 } }
  });
});

 

标签和柱状图配合起来使用好好。在此处,标签配置了”pointLabels”选项,该选择中之”labels”数组提供了签。此外,额外的CSS样式已经提供于标签。

图片 30

 

<style type="text/css">
#chart3 .jqplot-point-label {
  border: 1.5px solid #aaaaaa;
  padding: 1px 3px;
  background-color: #eeccdd;
}
</style>

 

$(document).ready(function(){
  var line1 = [14, 32, 41, 44, 40];
  var plot3 = $.jqplot('chart3', [line1], {
    title: 'Bar Chart with Point Labels', 
    seriesDefaults: {renderer: $.jqplot.BarRenderer},
    series:[
     {pointLabels:{
        show: true,
        labels:['fourteen', 'thirty two', 'fourty one', 'fourty four', 'fourty']
      }}],
    axes: {
      xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
      yaxis:{padMax:1.3}}
  });
});

 

点标签可以为此当堆积柱状图。如果无点名标签的一再组,它们以利用图表数据。值好独家吗每个系列显示(stackedValue选项设置也false,默认值),或者好展示有系列的累积值(
stackedValue选项为true )。

图片 31

 

$(document).ready(function(){
  var line1 = [14, 32, 41, 44, 40, 37, 29];
  var line2 = [7, 12, 15, 17, 20, 27, 39];
  var plot4 = $.jqplot('chart4', [line1, line2], {
      title: 'Stacked Bar Chart with Cumulative Point Labels', 
      stackSeries: true, 
      seriesDefaults: {
          renderer: $.jqplot.BarRenderer,
          rendererOptions:{barMargin: 25}, 
          pointLabels:{show:true, stackedValue: true}
      },
      axes: {
          xaxis:{renderer:$.jqplot.CategoryAxisRenderer}
      }
  });
});

 

数据点标签有一个”edgeTolerance”选项。此选项决定什么关闭数据点标签,它好是一个轴边缘,但还是可汲取。0底默认允许的签碰到坐标轴。正值将增加轴和标签中所用的离,负值将设标签重叠轴。

$(document).ready(function(){
  var line1 = [14, 32, 41, 44, 40, 47, 53, 67];
  var plot5 = $.jqplot('chart5', [line1], {
      title: 'Chart with Point Labels', 
      seriesDefaults: {
        showMarker:false,
        pointLabels: {
          show: true,
          edgeTolerance: 5
        }},
      axes:{
        xaxis:{min:3}
      }
  });
})

Plot Zooming(图表缩放)

 该项目图表可能因让以下插件

<script type="text/javascript" src="../src/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>

 

光标的插件也能要图表缩放。单击并拖动的图片范围为推广。双击复位。

您得禁用双击缩放复位。光标插件也扩展了plot对象及resetZoom()方法,它好起用户代码或任何HTML元素(如按钮)触发。

 

放大前

图片 32

 

放大后

图片 33

 

$(document).ready(function(){
  var plot1 = $.jqplot('chart1', [goog], { 
      title: 'Google, Inc.', 
      series: [{ 
          label: 'Google, Inc.', 
          neighborThreshold: -1 
      }], 
      axes: { 
          xaxis: { 
              renderer: $.jqplot.DateAxisRenderer,
              min:'August 1, 2007 16:00:00', 
              tickInterval: '4 months', 
              tickOptions:{formatString:'%Y/%#m/%#d'} 
          }, 
          yaxis: { 
              tickOptions:{formatString:'$%.2f'} 
          } 
      }, 
      cursor:{ 
        show: true,
        zoom:true, 
        showTooltip:false
      } 
  });

  $('.button-reset').click(function() { plot1.resetZoom() });
});

 

图片的缩放也适用将大半个轴。

图片 34

 

$(document).ready(function(){
  var plot2 = $.jqplot('chart2', [InPr, OutPr, ERPM], { 
      title:'Plot with Zooming and 3 Y Axes', 
      seriesDefaults: {showMarker:false}, 
      series:[
          {},
          {yaxis:'y2axis'}, 
          {yaxis:'y3axis'}
      ], 
      cursor: {
        show: true,
        tooltipLocation:'sw', 
        zoom:true
      }, 
      axesDefaults:{useSeriesColor: true}, 
      axes:{
          xaxis:{min:0, max:1600}, 
          yaxis:{min:0, max:600},  
          y2axis:{
              min:1000, 
              max:2000, 
              numberTicks:9, 
              tickOptions:{showGridline:false}
          }, 
          y3axis:{}
      } 
  });
});

 

 

到头来就了。。。

相关文章

网站地图xml地图