? ? ? ?jqplot是jquery的一个插件，该插件可以用来绘图，其官方文档地址：http://www.jqplot.com?大家可以根据情况选择查阅相应文档。
? ? ? ?jqplot插件用来绘图是比较简单的，如下图所示：
? ? ? ?上面的图形就是用jqplot进行绘制的，该图表只有一条线。这里对y轴的max值并没有加以限制，一般来说，这种只有一条线的图表，通常情况下，不限制max值绘图是没有什么问题的。但是，如果不止一条线，而且数据大小是动态的，情况就有些不同了，比如下图：
? ? ? ?可以看到，图表在最上面已经“溢出”了，这样就没办法看到这些“溢出”部分的情况是怎样。而且在这种情况下，其实是没办法直接指定y轴max值的大小，需要根据生成的数据来动态决定，代码如下：
drowChar : function(data) {
var options = {};
//组装成类似[[[],[],[]],[[],[],[]],[[],[],[]]]这样的数据结构，以满足画图所需的数据
if(data && data['xdata'] && data['ydata'] && data['others']){
var xdata=data['xdata'];//time
var ydata=data['ydata'];//avg
var max_min = data['others'];//max_min
var minArr = [],avgArr = [],maxArr = [], maxValueArr = [];
var minOps = [],avgOps = [],maxOps = [];
var totalData = [];//最后组装的数据
for(var i=0;i<xdata.length;i++){//xdata.length与ydata.length一定相等
if(max_min[i]){
var max_min_data = max_min[i].split(',');
}
//alert("max_min_data:"+max_min_data+",max:"+max_min_data[0]+", min:"+max_min_data[1])
//最大值
maxValueArr.push(max_min_data[0]);
maxArr.push(xdata[i],max_min_data[0]);
maxOps.push(maxArr);
maxArr = [];
//平均值
avgArr.push(xdata[i],ydata[i]);
avgOps.push(avgArr);
avgArr = [];
//最小值
minArr.push(xdata[i],max_min_data[1]);
minOps.push(minArr);
minArr = [];
}
totalData.push(maxOps);
totalData.push(avgOps);
totalData.push(minOps);
//获取最大值数组中的最大值
var maxValue = Math.max.apply(null,maxValueArr);
options['axes'] = {yaxis : {min : 0, max : maxValue*1.1}};
options.data = totalData;
this.plot.replot(options);
}
? ? ? 上面是绘图部分的关键代码，请注意上面的?options['axes'] = {yaxis : {min : 0, max : maxValue*1.1}};这里是根据生成的数据来动态传递y轴的max值，这里将其乘以1.1是为了渲染的更好，如下图所示：
? ? ? ?很明显，这里的渲染没有“超过”最上面的框，这里的数据都是动态生成的，然后根据这些生成的数据来获取其中最大的值，将其乘以1.1赋值给y轴的max值。所以，如果用jqplot绘制的图表不止一条线时，需要注意y轴最大值的问题，防止渲染的图表有“溢出”现象产生。