數據可視化(5)--jqplot經典實例

本來想把實例也寫到上篇博客里，最后發現太長了，拆成兩篇博客了。

實例來源於官方文檔：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...

下面這個圖表不需要任何插件

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

 

下面這個圖表使用了一些選項來設置標題，添加軸標簽，並展示了如何使用canvasAxisLabelRenderer插件來提供旋轉軸標簽。

$(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"
        }
      }
    });
}); 

 

下面的例子使用了許多線條樣式選項來控制線條和標記顯示

 

$(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等。

 

$(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）都支持在畫布元素原生文本渲染。

$(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字體。

$(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的字體。

$(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"。如果你的瀏覽器支持，你能看到標簽字體的差異。

 

$(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"選項的使用。

 

$(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"設置。

$(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數據數組。

$(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數據源中提取數據。

 

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

 

高亮插件將突出鼠標附近的數據點和顯示一個可選有數據值的提示。默認情況下，提示的數據值將與坐標軸刻度值格式化為相同的格式。文本格式可以自定義格式字符串。

$(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 %#d'
          } 
        },
        yaxis:{
          tickOptions:{
            // y軸刻度標簽格式化為帶兩位小數的美元數，如： $500.00
            formatString:'$%.2f'
            }
        }
      },
      highlighter: {
        // 是否高亮顯示
        show: true,
        // 當鼠標移動到數據點上時，數據點擴大的增量增量
        sizeAdjust: 7.5
      },
      cursor: {
        // 是否顯示光標，若為true，光標默認為十字
        show: false
      }
  });
});

 

光標插件改變鼠標光標，當它進入圖形區域，將顯示一個鼠標位置的提示。提示可以是在一個固定的位置，或者它可以跟隨鼠標移動。該指針的樣式，默認設置為十字，也可以自定義指針樣式。提示值的格式類似高亮插件。默認情況下，他們所使用軸的格式化方式，但可以定制。

 

$(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 %#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插件創建的。下面的圖表利用高亮插件，當鼠標移過一個數據點，它會顯示一個定制的提示。

 

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

 

 

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

 

 

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

 

 

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

 

 環形圖和餅狀圖的配置項幾乎相同。

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

 

 

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

 

 

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

 

 點擊圖表更新文本

$(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版本，將自動禁用。

$(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"選項實現了一些基本的自定義。

$(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創建。

$(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('<span style="font-size:14px;font-weight:bold;color:' + 
      color + ';">' + data[3] + '</span><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不一致導致的。

 

$(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'}}]
  });
});

 

時間軸還提供了強大的格式化功能。可以使用自定義格式化字符串格式化坐標軸刻度標簽。

 

$(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插件放置在圖上標記的數據點的位置。 標簽可以使用一系列的數據數組或一個單獨的標簽數組。如果使用的序列數據，該數據點中的最后一個值是默認用作標簽。

$(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。

$(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樣式已經提供給標簽。

 

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

 

$(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元素（如按鈕）觸發。

 

放大前

 

放大后

 

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

 

圖表的縮放也適用將多個軸。

 

$(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:{}
      } 
  });
});

 

 

終於完成了。。。