HTML_ 读文件显示曲线

在html页面显示曲线，数据从指定的文件中取 

<canvas id="myCanvas" width="900" height="400" style="border:1px solid #d3d3d3;">  
</canvas> 
<input type="file" id="fileInput" accept=".txt">  
<script>  
  document.getElementById('fileInput').addEventListener('change', function() {  
    var file = this.files[0]; // 获取选中的文件  
    var reader = new FileReader(); // 创建一个 FileReader 对象  
  
    reader.onload = function(e) {  
		var contents = e.target.result; // 读取文件内容  
		var yValues = contents.split('\n').map(Number); // 将文件内容按数值分割并转换为数字  

		var canvas = document.getElementById("myCanvas");  
		var ctx = canvas.getContext("2d"); 
        var xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]; 
        //var yValues = [100, 40, 9, 16, 25, 2, 3, 4, 5, 6, 11, 1, 24, 67, 22, 11, 12, 33, 44, 55, 22, 33, 90, 12, 11, 12, 33, 44, 55, 66];  
		ctx.translate(0, canvas.height); 
		ctx.scale(1, -1); 

		ctx.beginPath();  
		ctx.moveTo(xValues[0]*30, yValues[0]*2);  
		  
		for (var i = 1; i < xValues.length; i++) {  
			ctx.lineTo((xValues[i]-1)*30, yValues[i]*2);  
		}  
		  
		ctx.stroke();  


		ctx.beginPath();  
		ctx.moveTo(xValues[0]*30, yValues[0]*2);  
		  
		for (var i = 1; i < xValues.length; i++) {  
			ctx.lineTo((xValues[i]-1)*30, yValues[i+30]*2);  
		}  
		ctx.strokeStyle = 'red'; // 设置线条颜色为红色  
		ctx.stroke(); 
    };  
  
    reader.readAsText(file); // 以文本格式读取文件  
  });  


</script>