JavaScript实现的简单图表工具

使用Javascript 结合 html 的canva标签实现的简单图表工具

使用浏览器打开html文件
点击【选择文件】按钮，打开分行的测试数据，测试数据是0~10 之间的随机数
效果图如下：
测试数据 randodata.dat 中的部分内容：

HTML代码

<html>
<body width="100%">
<canvas id="canvas1" style="border:solid 2px black"></canvas><br/>
<input type="button" id="prepage" value="上一页"/></div><input id="nextpage" type="button" value="下一页"/><input type="file" id="file1" onchange="fileSelected(this)" />
<div id="pageIndexDiv">1/1</div>
</body>
<script>
    var curPageIndex = 0;
    var totleCount = 0;
    var contentArr =[];
    var pageSize = 1500;
    this.ctx = canvas1.getContext('2d');
    canvas1.width = pageSize;
    canvas1.height = 200;
    
    function drawLine(x1, y1, x2, y2) {
        this.ctx.beginPath();
        this.ctx.strokeStyle = "#008888";
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(x2, y2);
        this.ctx.stroke();
    }
    //drawLine(0, 0, 50, 50);  drawLine(50, 50, 100, 0);
    const reader = new FileReader();
    reader.onload = function (e) {
        let content = e.target.result;
        contentArr = content.split('\n');
        curPage = 0;
        totleCount = contentArr.length;
        drawPage(0);
    };
    function clearCanvas() { 
        this.ctx.fillStyle = "#e0e0e0";
        this.ctx.fillRect(0, 0, canvas1.width, canvas1.height);
    }
    function drawPage(index) {
        if(index < totleCount/pageSize && index>=0) {
            for(var i = 0;i<  pageSize-1;i++) {
                drawLine(i,parseInt(contentArr[i+ index* pageSize]) + 100,i+1,parseInt(contentArr[index* pageSize+1])+100);
            }
        }   
        pageIndexDiv.innerText = curPageIndex.toString() + "/" + (totleCount/pageSize).toString(); 
    }
    function fileSelected() {
        reader.readAsText(file1.files[0]);
    }
    prepage.onclick = function(){
        clearCanvas();
        curPageIndex--;
        drawPage(curPageIndex);
    };
    nextpage.onclick = function(){
        clearCanvas();
        curPageIndex++;
        drawPage(curPageIndex);
    };
    pageIndexDiv.innerText = curPageIndex.toString() + "/" + (totleCount/pageSize).toString();
    clearCanvas();
</script>
</html>