[从头学数学] 第88节 折线统计图

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入练气期第十层功法的修炼，
这次要修炼的目标是[折线统计图]。

正剧开始：

星历2016年02月15日 12:42:33, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究折线统计图的绘制。

[人叫板老师]是根据条形图引出了折线图的概念，小伟决定也这样做。

上次绘制条形图时有这样一个例子：

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
    var stat = new Statistic();  
    var data = [[36779,46106],[36564,54731],[34036,64125],[31373,74721],[29434,85900],[28512,98625]];  
    var text = ['2006','2007','2008', '2009', '2010', '2011'];  
    var text2 = ['固定电话', '移动电话'];  
      
    stat.init(data, '年份', '用户/万户', 2);  
      
    var x = 0, y = 20;  
    stat.multiHistogram(text,text2, x, y);
	
	
	
}</span>

小伟只改了一下调用的方法名称：

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
    var stat = new Statistic();  
    var data = [[36779,46106],[36564,54731],[34036,64125],[31373,74721],[29434,85900],[28512,98625]];  
    var text = ['2006','2007','2008', '2009', '2010', '2011'];  
    var text2 = ['固定电话', '移动电话'];  
      
    stat.init(data, '年份', '用户/万户', 2);  
      
    var x = 0, y = 20;  
    stat.multiLineGraph(text,text2, x, y);
	
	
	
}</span>

就可以得到以下结果：

看来这样就可以了。

<span style="font-size:18px;">	//复式折线统计图
	this.multiLineGraph = function(lableArray, lableArray2, xOffset, yOffset) {
		//lableArray是统计数据中横轴的描述
		//lableArray2是所统计的项目的描述
		lableArray = lableArray ? lableArray : [];
		var lables = lableArray.length;
		xOffset = xOffset ? xOffset : 0;
		yOffset = yOffset ? yOffset : 0;
		
		var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
			'#888888', 'black'];
		var colors = colorArray.length;
			
		var height = 380, width = 580;
		
		plot.save()
			.translate(xOffset+60, yOffset+50);

		plot.setLineWidth(2)
			.setTextAlign('right');
			
		var max = Math.ceil(this.max());  
		var min = Math.floor(this.min()); 
		
		var mod = 1;
		while (max > mod * 10) {
			mod *= 10;
		}
		
		if (mod > 10) 
			mod /= 10;
		//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
		var adjmax = Math.ceil(max/mod)*mod;
		if (adjmax == max) {
			adjmax+=mod;
		}
		
		adjmax /= mod;
		
		var size = this.size();  
		var perH = Math.round((height-100) / adjmax); 
		var part = 2 * size;
		var perW = Math.round((width-100) / part);
		
		//宽和高度边界
		var wBound = part*perW, hBound = adjmax*perH;
		plot.setLineWidth(5)
			.strokeRect(0, 0, wBound, hBound);
			
		this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
			
		plot.setLineWidth(2);
		var count = 0;
		
		//图表方格
		for (var i = hBound; i >-1; i -= hBound / 10) {
			plot.fillText((adjmax*mod/10*count).toFixed(0), -10, i+10, 30);
			count++;
			
			if (i > 0) {
				plot.beginPath()
					.moveTo(0, i)
					.lineTo(wBound, i)
					.closePath()
					.stroke();
			}
		}
		
		for (var i = 0; i < part; i++) {
			plot.beginPath()
				.moveTo(i*perW, 0)
				.lineTo(i*perW, hBound)
				.closePath()
				.stroke();
		}
		

		
		var xpos, xpos2, ypos;
		
		//折线和图例
		for (var j = 0; j < this.multi; j++) {
			
			plot.setStrokeStyle(colorArray[j%colors]);
				
			for (var i = 0; i < size; i++) { 
			
				xpos = perW*(2 * i+1);
				ypos = hBound-this.statisticalSample[i][j]/mod*perH;


				
				//plot.fillRect(xpos, hBound, perW, -this.statisticalSample[i][j]/mod*perH); 
				//

					if (i==0) {
						plot.beginPath()
							.moveTo(xpos, ypos);
					}
					else if (i < size-1) {
						plot.lineTo(xpos, ypos);
					}
					else {
						plot.lineTo(xpos, ypos)
							.moveTo(xpos, ypos)
							.closePath()
							.stroke();
					}
				

			}
			

			//plot.fillText(this.statisticalSample[i].toFixed(0), xpos2, hBound+40, 100);  
		}  
		
		//数据点
		for (var j = 0; j < this.multi; j++) {
			
			plot.setFillStyle(colorArray[j%colors]);				
			for (var i = 0; i < size; i++) { 	
				xpos = perW*(2 * i+1);
				ypos = hBound-this.statisticalSample[i][j]/mod*perH;
				shape.fillCircle(xpos, ypos, 5);
			}
		}
		
		//x轴标签
		for (var i = 0; i < size; i++) { 
			xpos2 = perW*(2 * i+1);
			plot.setFillStyle('black');
			plot.setTextAlign('center');
			if (i < lables) {
				plot.fillText(lableArray[i], xpos2, 
					hBound+30, 100);  

			}
		}
		
		plot.setTextAlign('left');
		for (var j = 0; j < this.multi; j++) {			
			plot.setFillStyle(colorArray[j%colors]);  
			plot.fillRect(wBound - 50, -20-25*(this.multi-j-1), 20, 2);
			plot.fillText(lableArray2[j], wBound-20, -20-25*(this.multi-j-1)+12, 50);
			
			
		}
		
		plot.restore();
	
	}
	</span>

而且也是很方便扩展的，比如：

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
    var stat = new Statistic();  
    var data = [[36779,46106, 10000],[36564,54731, 10000],[34036,64125, 10000],[31373,74721, 10000],[29434,85900, 10000],[28512,98625, 10000]];  
    var text = ['2006','2007','2008', '2009', '2010', '2011'];  
    var text2 = ['固定电话', '移动电话', '其它'];  
      
    stat.init(data, '年份', '用户/万户', 3);  
      
    var x = 0, y = 20;  
    stat.multiLineGraph(text,text2, x, y);
	
	
	
}
</span>

但是这次[人叫板老师]举的例子，纵坐标的起点都不是从0开始的。

不过小伟觉得晢时还是不改代码了，否则每次都要自己去提供起点和刻度，是一件很麻烦的事情。

上海市的出生人口数比死亡人口口数要低。

有没有搞错？这出生人口明显要高于死亡人口啊。

要说共同规律，小伟只看出来死亡人口在增加，其它好像没什么呀。

这个坐标起点的问题是这样的明显，小伟决定视而不见。

本节到此结束，欲知后事如何，请看下回分解。