|
利用canvas绘制折线图
效果：
思路：
1）给出来的数值和横坐标数据整体是没有规律的，分别将它们保存在数组nums和datas中。并
2）只有两个坐标线，定义一个函数drawBorder绘制这两条线；
3）考虑到折线是四段，这里定义一个函数drawLine绘制折线，用一个for循环循环4次，每次循环从（numsX,numsY）绘制到（numsNX,numsNY）
4）再定义一个函数drawBlock来绘制横坐标数值，折线上的菱形和数值，以及横坐标。
注意：
1）考虑到横坐标数值跟画布的实际像素值不能对应，因此要将实际数值等比例转化为像素值再应用；
2）在绘制横坐标时，横坐标点数比纵坐标少一个，需要进行一次判断；
3）这里绘制菱形和其他绘制放在同一个函数里，所以不能用平移坐标和旋转矩形的方法。
代码如下：
<canvas id="can1" width="800" height="600"></canvas>
<script type="text/javascript">
var can1 = document.getElementById("can1");
var ctx = can1.getContext("2d");
nums = [268,1236,1273,1545,1988];
datas = ["11.1-11.2","11.3-11.9","11.10-11.16","11.17-11.23","11.24-11.30"];
//画出坐标线
function drawBorder(){
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(100,550);
ctx.moveTo(100,550);
ctx.lineTo(600,550);
ctx.closePath();
ctx.stroke();
}
//画出折线
function drawLine(){
for (i = 0;i < nums.length-1;i ++){
//起始坐标
var numsY = 550-nums[i]/500*100;
var numsX = i*100+150;
//终止坐标
var numsNY = 550-nums[i+1]/500*100;
var numsNX = (i+1)*100+150;
ctx.beginPath();
ctx.moveTo(numsX,numsY);
ctx.lineTo(numsNX,numsNY);
ctx.lineWidth = 6;
ctx.strokeStyle = "#80aa33";
ctx.closePath();
ctx.stroke();
}
}
//绘制折线点的菱形和数值，横坐标值，纵坐标值
function drawBlock(){
for (i = 0;i <= nums.length;i ++){
var numsY = 550-nums[i]/500*100;
var numsX = i*100+150;
ctx.beginPath();
// 画出折线上的方块
ctx.moveTo(numsX-4,numsY);
ctx.lineTo(numsX,numsY-4);
ctx.lineTo(numsX+4,numsY);
ctx.lineTo(numsX,numsY+4);
ctx.fill();
ctx.font = "15px scans-serif";
ctx.fillStyle = "black";
//折线上的点值
var text = ctx.measureText(nums[i]);
ctx.fillText(nums[i],numsX-text.width,numsY-10);
//绘制纵坐标
var colText = ctx.measureText((nums.length-i)*500);
ctx.fillText((nums.length-i)*500,90-colText.width,i*100+55);
//绘制横坐标并判断
if (i < 5){
var rowText = ctx.measureText(datas[i]);
ctx.fillText(datas[i],numsX-rowText.width/2,570);
}else if(i == 5) {
return;
}
ctx.closePath();
ctx.stroke();
}
}
drawBorder();
drawLine();
drawBlock();
</script>
| 
转播
