jqplot总结

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

重点是3.配置。

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

 

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

 

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

 

dataRenderer外部数据加载方式。

 

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

 

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

 

特别说明legend。

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

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

 

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

 

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

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

 

 

 

 

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

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


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


});
</script>

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

 

 

 

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

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


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


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


});
</script>

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

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


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

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


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

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

});
</script>

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



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

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

 

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

网上找的相关资料链接：

 

 

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

 

 

posted @ 2012-12-03 09:47  草珊瑚  阅读(16404)  评论(1)  编辑  收藏  举报