htmledit_views">
在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>