html画坐标折现图,使用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,68,98,103];

//首先为背景进行设置渐变的效果,表示的是从(0,0)到(600,0)即纵坐标上边显示渐变的效果

var g=cxt.createLinearGradient(0,0,0,100);

g.addColorStop(0,"#e0e0e0");

g.addColorStop(1,"#ffffff");

//将渐变效果添加在我们的画布上边

cxt.fillStyle=g;

//开始绘制效果

cxt.fillRect(0,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;