使用canvas在IE下绘制折线图,因为要支持IE8以及更早版本,所以引用了html5.js和excanvas.js两个库。
当使用fillText方法在canvas中添加文本的时候,在IE8以上版本中正常显示,但是在IE8以及更早版本中却发生了错位。
正常显示图、错误显示图如末尾的图所示。
其中增加文字的代码如下:
//填写X轴信息(周一、周二等)
this.ctx.beginPath();
for( var i=0,ptindex;i< data.values[key]["value"+key].length;i++ ){
ptindex = i+1;
var x_x = this.getCoordX(padding,perwidth,ptindex);
var x_y = can.height-padding+30;
console.log("x_x is "+x_x);
console.log("x_y is "+x_y);
this.ctx.fillText(data.values[key]["value"+key][i].x, x_x-20, x_y, perwidth);
}
for(var i=0;i< ycount/10;i++)
{
this.ctx.fillText(i*10, padding-30, (ycount/10-i)*10*maxY, perwidth);
}
利用console.log打印出来的用于定位text位置的 x_x、x_y 如末尾的图所示。
其中canvas的定义以及css属性定义如下:
<canvas width="700" height="400" id="canvas"> </canvas>
<style>
body{background-color:#bfd0c4;}
canvas{background-color:white;position:absolute;top:50%;left:50%;margin-left:-350px;margin-top:-250px;box-shadow: 3px 3px 3px #7e7a7c;}
</style>
看到题目我就点进来。 参考网址 http://nannan408.iteye.com/bl...
我们公司的做法是 低版本ie 独立模板渲染。只保留基础功能