//得到画布
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
