JavaScript实现的简单图表工具

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

  1. 使用浏览器打开html文件

  2. 点击【选择文件】按钮，打开分行的测试数据，测试数据是0~10 之间的随机数
    效果图如下：

  3. 测试数据 randodata.dat 中的部分内容：

7
0
0
6
3
3
6
6
4
1
6
4
6
3
8
5
9
7
9
6
7
6
9
  1. 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>
posted @ 2024-12-05 23:27  西域男孩  阅读(10)  评论(0)    收藏  举报