[从头学数学] 第144节 一次函数

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了筑基中期的修炼，
这次要修炼的目标是[一次函数]。

正剧开始：

星历2016年03月21日 10:36:24, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[一次函数]。

为了研究函数，阿伟特意进化了一下坐标轴工具，从此，坐标轴可以带上刻度了：

<span style="font-size:18px;">/*** @usage   绘制直角坐标系* @author  mw* @date    2015年11月28日  星期六  14:17:34 * @param* @return**/this.axis2D = function(x, y, r, xScale) {plot.save();y = -y;xScale = xScale ? xScale : 1.5;plot.setFillStyle('black').setStrokeStyle('black');plot.beginPath().moveTo(x-xScale*r,y).lineTo(x+xScale*r,y).closePath().stroke();plot.beginPath().moveTo(x,y-r).lineTo(x,y+r).closePath().stroke();var r0 = 10;//x轴箭头plot.beginPath().moveTo(x+xScale*r- r0*Math.cos(Math.PI/3), y-r0*Math.sin(Math.PI/3)).lineTo(x+xScale*r+r0*Math.sin(Math.PI/3), y).lineTo(x+xScale*r -r0*Math.cos(Math.PI/3), y+r0*Math.sin(Math.PI/3)).closePath().fill()plot.fillText("X", x+xScale*r, y-10, 20);plot.fillText("Y", x+10, y-r+10, 20);//y轴箭头plot.beginPath().moveTo(x+ r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3)).lineTo(x, y-r-r0*Math.sin(Math.PI/3)).lineTo(x-r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3)).closePath().fill()plot.restore();}/*** @usage   坐标轴的标尺* @author  mw* @date    2016年03月21日  星期一  09:10:42 * @param* @return**/this.axisSpacing = function(start, end, spacing, scale, mode) {//如果start和end同号，默认坐标原点为start，坐标轴正向标注到end处//spacing为从start到end之间的每个刻度的间隔//scale为坐标轴方格单位的大小，影响图形的视觉大小//scale越大，1个单位在图像上的长度就越大//mode确定坐标刻度是标注给'X', 'Y', 或'Z'轴等plot.save().setStrokeStyle('#FF0044').setFillStyle('#CC0022');mode = mode ? mode : 'X';var lineSpace = [];var maxStop = 0, minStop = 0;if (start > end) {var swap = start;start = end;end = swap;}//判断start和end是否同号var same = start * end < 0 ? false : true;if (mode.toUpperCase() == 'X') {if (same == false) {//start和end异号，坐标原点为0minStop = Math.floor(start/spacing);maxStop = Math.ceil(end/spacing);}else {if (start >= 0) {minStop = 0;maxStop = Math.ceil((end-start)/spacing);} else if (end <= 0) {maxStop = 0;minStop = Math.floor((start-end)/spacing);}}for (var i = minStop; i <= maxStop; i++) {lineSpace.push(i);}var len = lineSpace.length;var x , y;var s, measure;//刻度线plot.beginPath();for (var i = 0; i < len; i++) {x = lineSpace[i]*scale;plot.moveTo(x, 0).lineTo(x, -5);}plot.closePath().stroke();//标注值文本for (var i = 0; i < len; i++) {if (same == false) {x = lineSpace[i]*spacing;}else {if (start >= 0) {x = start + lineSpace[i]*spacing;}else if (end <= 0) {x = end+lineSpace[i]*spacing;}}if (Math.abs(x-Math.round(x)) < 0.0001) {s = x.toFixed(0);}else {s = x.toFixed(2);}measure = plot.measureText(s);plot.fillText(s, lineSpace[i]*scale-measure/2, 20, measure);}}else if (mode.toUpperCase() == 'Y') {if (same == false) {//start和end异号，坐标原点为0minStop = Math.floor(start/spacing);maxStop = Math.ceil(end/spacing);}else {if (start >= 0) {minStop = 0;maxStop = Math.ceil((end-start)/spacing);}else if (end <= 0) {maxStop = 0;minStop = Math.floor((start-end)/spacing);}}for (var i = minStop; i <= maxStop; i++) {lineSpace.push(i);}var len = lineSpace.length;var x , y;var s, measure;//刻度线plot.beginPath();for (var i = 0; i < len; i++) {y = -lineSpace[i]*scale;plot.moveTo(0, y).lineTo(-10, y);}plot.closePath().stroke();//标注值文本for (var i = 0; i < len; i++) {if (same == false) {y = lineSpace[i]*spacing;}else {if (start >= 0) {y = start + lineSpace[i]*spacing;}else if (end <= 0) {y = end+lineSpace[i]*spacing;}}if (Math.abs(y-Math.round(y)) < 0.0001) {s = y.toFixed(0);}else {s = y.toFixed(2);}measure = plot.measureText(s);plot.fillText(s, -15-measure, -(lineSpace[i]*scale-5), measure);}}else {//'Z'轴标注待扩展}plot.restore();}</span>

<span style="font-size:18px;">var r = 20;config.setSector(1,1,1,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,180);  var scale = 2 * r;config.axisSpacing(1984, 2010, 5, scale, 'X');config.axisSpacing(10, 14, 1, scale, 'Y');var transform = new Transform();var a = [[1984,10.34],[1989,11.06],[1994,11.76],[1999,12.52],[2010,13.71]];a = transform.scale(transform.translate(a, -1984, -10), scale/5, scale);var tmp = [].concat(a);shape.pointDraw(tmp, 'red');tmp = [].concat(a);shape.multiLineDraw(tmp, 'blue');</span>

好像人口增长速度放缓了呀。

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(0, 12, 2, scale, 'Y');config.axisSpacing(0, 4, 2, scale, 'X');var transform = new Transform();var a = [];for (var i = 0; i < 4; i++) {a.push([i, i*i]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(0, 12, 2, scale, 'Y');config.axisSpacing(-5, 5, 2, scale, 'X');var transform = new Transform();var a = [];for (var i = -5; i <= 5; i++) {a.push([i, i+0.5]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);var b = [];for (var i = 1; i <= 5; i++) {b.push([i, 6/i]);}tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(0, 1, 0.2, scale, 'Y');config.axisSpacing(0, 1620*5, 1620, scale, 'X');var transform = new Transform();var a = [];for (var i = 0; i <= 5; i++) {a.push([i, Math.pow(0.5, i)]);}a = transform.scale(a, 2, 10);var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(-5, 5, 1, scale, 'X');config.axisSpacing(-5, 5, 1, scale, 'Y');var transform = new Transform();var a = [];var b = [];for (var i = -10; i <= 10; i++) {a.push([i, -1.5*i]);b.push([i, -4*i]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(-5, 5, 1, scale, 'X');config.axisSpacing(-5, 5, 1, scale, 'Y');var transform = new Transform();var a = [];var b = [];for (var i = -10; i <= 10; i++) {a.push([i, -6*i]);b.push([i, -6*i+5]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(-5, 5, 1, scale, 'X');config.axisSpacing(-5, 5, 1, scale, 'Y');var transform = new Transform();var a = [];var b = [];for (var i = -10; i <= 10; i++) {a.push([i, 2*i-1]);b.push([i, -0.5*i+1]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(-5, 5, 1, scale, 'X');config.axisSpacing(-5, 5, 1, scale, 'Y');var transform = new Transform();var a = [];var b = [];var c = [];for (var i = -10; i <= 10; i++) {a.push([i, 3*i-2]);b.push([i, i*i]);c.push([i, i*i*(i-3)]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF', r);tmp = [].concat(c);shape.pointDraw(tmp, 'green', r);tmp = [].concat(c);shape.multiLineDraw(tmp, '#CCFF22', r);</span>

可见如果超过75小时，肯定就是包月120元的划算了。

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(0, 150, 20, scale, 'X');config.axisSpacing(0, 150, 20, scale, 'Y');var transform = new Transform();var a = [];var b = [];var c = [];for (var i = 0; i <= 300; i+=5) {if (i <= 25) {a.push([i, 30]);}else {a.push([i, 30+(i-25)*0.05*60]);}if (i <= 50) {b.push([i, 50]);}else {b.push([i, 50+(i-50)*0.05*60]);}c.push([i, 120]);}var tmp = [].concat(a);//shape.pointDraw(tmp, 'red', 1);//tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', 2);tmp = [].concat(b);//shape.pointDraw(tmp, 'blue', r);//tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF',2);tmp = [].concat(c);//shape.pointDraw(tmp, 'green', r);//tmp = [].concat(c);shape.multiLineDraw(tmp, '#CCFF22', 2);</span>

可选区域为黄线往下，蓝线往下，红线往上，x轴往上的区域，而且黄线的值越大说明花钱越少。

这样的话可以选择4辆甲车和2辆乙车。

但这个区域实在不是那么直观。

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;config.axisSpacing(0, 10, 2, scale, 'X');config.axisSpacing(0, 10, 2, scale, 'Y');var transform = new Transform();var a = [];var b = [];var c = [];for (var i = 0; i <= 6; i++) {//甲车x辆，乙车y辆a.push([i, (234-45*i)/30]);b.push([i, 6-i]);c.push([i, (2300-400*i)/280]);}var tmp = [].concat(a);shape.pointDraw(tmp, 'red', r);tmp = [].concat(a);shape.multiLineDraw(tmp, 'pink', r);tmp = [].concat(b);shape.pointDraw(tmp, 'blue', r);tmp = [].concat(b);shape.multiLineDraw(tmp, '#22CCFF',r);tmp = [].concat(c);shape.pointDraw(tmp, 'green', r);tmp = [].concat(c);shape.multiLineDraw(tmp, '#CCFF22', r);</span>

<span style="font-size:18px;">var r = 20;config.setSector(5,1,4,1);  config.graphPaper2D(0, 0, r);config.axis2D(0, 0,260, 1);  var scale = 2 * r;var spaceX = 10, spaceY = 10;config.axisSpacing(1960, 2010, spaceX, scale, 'X');config.axisSpacing(20,80, spaceY, scale, 'Y');var transform = new Transform();var a = [[1960,30],[1974,40],[1987,50],[1999,60],[2010,69]];a = transform.scale(transform.translate(a, -1960, -20), scale/spaceX, scale/spaceY);var tmp = [].concat(a);shape.pointDraw(tmp, 'red');tmp = [].concat(a);shape.multiLineDraw(tmp, 'blue');</span>

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