使用html5画简单的折线图

//得到画布
    var can1=document.getElementByIdx_x_x_x("can");
    //得到画笔
    var cxt=can1.getContext("2d");

    //定义图表的数据，该方式为创建数组直接量的方式
    var sale_data=[80,92,104,110,68,50,45,90,74,98,103];

    //首先为背景进行设置渐变的效果,表示的是从(0,0)到(600,0)即纵坐标上边显示渐变的效果
    var g=cxt.createLinearGradient(0,100);
    g.addColorStop(0,"#e0e0e0");
    g.addColorStop(1,"#ffffff");
    //将渐变效果添加在我们的画布上边
    cxt.fillStyle=g;
    //开始绘制效果
    cxt.fillRect(0,can1.width,can1.height);

    //设置要绘制方格的行数和列数
    var cols=sale_data.length+1;
    var rows=4;

    //计算每一个小方格的宽度和高度
    var cell_width=can1.width/cols;
    var cell_height=can1.height/rows;

    //设置绘制的颜色
    cxt.strokeStyle="#a0a0a0";
    //调用绘制表格的函数
    drawTable(sale_data);

    //绘制表格的函数
    function drawTable(data){
        cxt.beginPath();
        //开始画竖线
        for(var i=0;i<=rows;i++){
            //计算绘制的坐标
            var heiy=cell_height*i;
            cxt.moveTo(0,heiy);
            cxt.lineTo(can.width,heiy);
        }

        //绘制横线
        for(var j=0;j<=cols;j++){
            //计算绘制的坐标
            var widx=cell_width*j;
            cxt.moveTo(widx,0);
            cxt.lineTo(widx,can1.height);
        }

        //绘制表格完成
        cxt.stroke();

        //获取数据当中的最大值，以便可以划分纵坐标轴，来进行绘图，即每个像素代表的数值是多少，纵坐标的最大值
        var max_val=0;
        for(var i=0;i
            if(max_val
                max_val=data[i];
            }
        }
        //之后我们对最大值再放大一点，作为坐标轴的最大值
        max_val=max_val*1.1;

        //现在我们计算每个数据的坐标轴
        //这里我们将计算出来的坐标轴数据写入到我们的数组对象当中去
        var points=[];
        for(var i=0;i
            var v=data[i];
            var px=cell_width*(i+1);
            var py=can1.height-can1.height*(v/max_val);
            points.push({"x":px,"y":py});
        }

        //开始绘制折线
        cxt.beginPath();
        cxt.moveTo(points[0].x,points[0].y);
        for(var j=1;j
            cxt.lineTo(points[j].x,points[j].y);
        }
        cxt.strokeStyle="#ee0000";
        cxt.stroke();

        //绘制坐标的小圆点
        for(var j in points){
            var p=points[j];
            cxt.beginPath();
            cxt.arc(p.x,p.y,6,2*Math.PI);
            cxt.fillStyle="#ee0000";
            cxt.fill();
        }
    }

转自：http://blog.sina.com.cn/s/blog_7256fe8f010165cb.html