jqplot绘图时数据过大导致渲染不当

       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轴最大值的问题，防止渲染的图表有“溢出”现象产生。