javascript 练习题目答案

//廖雪峰的博客的这个教程的答案
//https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449990549914b596ac1da54a228a6fa9643e88bc0c000#0

    var
        canvas = document.getElementById('stock-canvas'),
        width = canvas.width,
        height = canvas.height,
        ctx = canvas.getContext('2d');
    console.log(JSON.stringify(data[0])); // {"date":"20150602","open":4844.7,"close":4910.53,"high":4911.57,"low":4797.55,"vol":62374809900,"change":1.69}
    ctx.clearRect(0, 0, width, height);

//已知函数传进来的data是一个数组,数组的每个元素是一个对象,格式如下
//{"date":"20150602","open":4844.7,"close":4910.53,"high":4911.57,"low":4797.55,"vol":62374809900,"change":1.69}
//其中我们能用到的是 open , close, high, low
//解释一下四个参数的含义,我们知道K线图的形状 类似于汉字  中   其中
//high表示的是中字中间一竖的最上边一点的Y坐标,
//low 是中字中间一竖的最下边一点的Y坐标,
//如果open大于close,则表示股票交易结束的时候比开始的时候低了,则要用绿色表示
//open是中字中间的口的上边一横的Y坐标,
//close是下边一横的Y坐标

	//data = data.slice(data.length-2)
console.log("width="+width+" heigth="+height  );	

//计算最上和最下的留白
liubai = 0.01 * height;
arangeY = {
		startY : liubai,
		endY : height-liubai
			};

calcBulk = function(inputdata, xrange, arangeY){
	var widthPerBulk = xrange/inputdata.length;
	//绘制节点信息列表
	var paintBulkList = [];
	//绘制的一个节点
	var paintBulk = {color:null, lineStart:{x:0, y:0},lineEnd:{x:0, y:0}, boxStart:{x:0, y:0},boxEnd:{x:0, y:0}};
	//求最高点
	var highest = inputdata.reduce(function(x,y){
		  x => {if(x.high) x.high; else x;}
			if(x>y.high)
			{
				return x;
			}
			else
			{
				return y.high;
			}
	});
	//求最低点
	var lowest = inputdata.reduce(function(x,y){
		  x => {if(x.low) x.low; else x;}
			if(x<y.low)
			{
				return x;
			}
			else
			{
				return y.low;
			}
	});

	//每个点数对应多少像素
	var hightRate = (arangeY.endY - arangeY.startY)/(highest-lowest);
	console.log("high="+highest+" low="+lowest+" rate="+hightRate);
	for(let i=0;i<inputdata.length;i++)
	{
		//计算颜色
		var boxColor = "";
		var boxStartVal = NaN;
		var boxHeightVal = NaN;
		if(inputdata[i].open > inputdata[i].close)
		{//green
			boxColor = "#dc0000";
			boxStartVal = inputdata[i].close;
		}
		else
		{//red
			boxColor = "#1caa3d";
			boxStartVal = inputdata[i].open;
		}
		boxHeightVal = Math.abs(inputdata[i].open-inputdata[i].close);

		paintBulkList.push({color:boxColor,
										lineStart:{x:Math.round((i*widthPerBulk)+(widthPerBulk/2)), y:Math.round(arangeY.startY+(inputdata[i].low-lowest)*hightRate)},
										lineEnd:{x:Math.round((i*widthPerBulk)+(widthPerBulk/2)), y:Math.round(arangeY.startY+(inputdata[i].high-lowest)*hightRate)},
										boxStart:{x:Math.round((i*widthPerBulk)+1), y:Math.round(arangeY.startY+(boxStartVal-lowest)*hightRate)},
										boxRange:{width:Math.round(widthPerBulk-2), height:Math.round(arangeY.startY+boxHeightVal*hightRate)}});
		}

		return paintBulkList;
	}

	paintList = calcBulk(data, width, arangeY);
	console.log("paintList="+JSON.stringify(paintList));
	//画图
	ctx.clearRect(0, 0, width, height ); //
	ctx.fillStyle = '#000000'; //
	ctx.fillRect(0, 0, width, height ); //
	for(let i=0;i<data.length;i++)
	{

		////////////////////box
		ctx.fillStyle = paintList[i].color; // 设置颜色
		ctx.fillRect(paintList[i].boxStart.x, paintList[i].boxStart.y, paintList[i].boxRange.width, paintList[i].boxRange.height ); //
		///////////////////line
		// 设置线条的颜色
		ctx.strokeStyle = 'white';
		// 设置线条的宽度
		ctx.lineWidth = 1;

		// 绘制直线
		ctx.beginPath();
		// 起点
		ctx.moveTo(paintList[i].lineStart.x, paintList[i].lineStart.y);
		// 终点
		ctx.lineTo(paintList[i].lineEnd.x, paintList[i].lineEnd.y);
		ctx.closePath();
		ctx.stroke();
	}