使用canvas来绘制折线图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坐标点进行连线</title>
    <style>
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- 将今天绘制的坐标点进行连线 -->
    <canvas width="600" height="400" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var padding = 30;
    var arrowHeight = 20,
        arrowWidth = 10;
    var x0 = padding,
        y0 = canvas.height - padding;
    var maxX = canvas.width - padding*2 -arrowHeight,
        maxY = canvas.height - padding*2 - arrowHeight;
    //绘制坐标轴
    //X轴
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0,y0 - maxY-arrowHeight);
    //Y轴
    ctx.moveTo(x0,y0);
    ctx.lineTo(x0 + maxX +arrowHeight,y0);
    ctx.stroke();
    //绘制箭头
    //X轴
    ctx.beginPath();
    ctx.moveTo(x0+maxX+arrowHeight,y0);
    ctx.lineTo(x0+maxX,y0-arrowWidth*0.5);
    ctx.lineTo(x0+maxX+arrowHeight*0.5,y0);
    ctx.lineTo(x0+maxX,y0+arrowWidth*0.5);
    //Y轴
    ctx.moveTo(x0,y0-maxY-arrowHeight);
    ctx.lineTo(x0-arrowWidth*0.5,y0-maxY);
    ctx.lineTo(x0,y0-maxY-arrowHeight*0.5);
    ctx.lineTo(x0+arrowWidth*0.5,y0-maxY);
    ctx.fill();
    //绘制点
    ctx.beginPath();
    var data = [ [ 10, 20 ], [ 15, 13 ], [ 17, 30 ], [ 30, 10 ], [ 20, 15 ] ];
    //取点的数据
    /*将其中X与Y的最大值找出来，因为要做一个比例的转化：
                            点坐标/max点坐标 = 页面上点坐标/canvas的轴的最大值*/
    var pointX = Math.max.apply(null,data.map(function(v){return v[0];}));
    var pointY = Math.max.apply(null,data.map(function(v){return v[1];}));
    //法一：使用冒泡排序
    for(var i =0;i<data.length-1;i++){
        for(var j =0;j<data.length-1-i;j++){
            if(data[j][0]>data[j+1][0]){
                var temp = data[j +1];
                data[j+1] = data[j];
                data[j] = temp;
            }
        }
    }
    //声明一个新数组用于存储数据
    var arr = [];
    for(var i = 0 ; i < data.length ; i++){
        var tempX = data[i][0]/pointX*maxX,
            tempY = data[i][1]/pointY*maxY;
        //一定要记得坐标的最后一步转换
        var X = x0 + tempX,
            Y = y0 - tempY;
        arr.push([X,Y]);
        ctx.moveTo(X-4,Y-4);
        ctx.lineTo(X-4,Y+4);
        ctx.lineTo(X+4,Y+4);
        ctx.lineTo(X+4,Y-4);
    }
    console.log(arr);
    ctx.fill();
    //画线
    ctx.beginPath();
    //比较值，优化直线
    arr.forEach(function(v,i){
        ctx[['moveTo','lineTo'][i>0?1:0]](v[0],v[1]);
    })
    /*for(var i = 0 ; i < data.length-1 ; i++){
        var tempX = data[i][0]/pointX*maxX,
            tempY = data[i][1]/pointY*maxY;
        var tempX1 = data[i+1][0]/pointX*maxX,
            tempY1 = data[i+1][1]/pointY*maxY;
        //一定要记得坐标的最后一步转换
        var X = x0 + tempX,
            Y = y0 - tempY,
            X1 = x0 + tempX1,
            Y1 = y0 - tempY1;
        ctx.moveTo(X,Y);
        ctx.lineTo(X1,Y1);
    }*/
    ctx.stroke();
</script>
</html>
posted @ 2017-02-21 17:17  一混五六年  阅读(307)  评论(0)  编辑  收藏  举报