Description
原因
项目中要用到数据可视化,我选择了Chart.js,确实挺好用的。但是因为Chart.js是用canvas实现的,IE8及以下不支持canvas。官方给出的解决方案在这里。
Attention!
1. chartjs初始化必须在页面刚刚加载的时候完成
如果只是引入excanvas的话,在IE8中还是没法工作。
Initialise charts on load rather than DOMContentReady when using the library, as sometimes a race condition will occur, and it will result in an error when trying to get the 2d context of a canvas.
此处指出,用excanvas的话,初始化chartjs的操作必须在页面刚刚加载的时候就进行,否则程序会在获取canvas上下文的时候出错。
我们去看看excanvas的官方例子。
<head>
<title>ExplorerCanvas Example 1</title>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script type="text/javascript">
function load() {
canvas = document.getElementById("cv");
// ....
}
</script>
</head>
<body onload="load();">
<canvas id="cv" width="400" height="300"></canvas>
</body>
2. 取消动画
New VML DOM elements are being created for each animation frame and there is no hardware acceleration. As a result animation is usually slow and jerky, with flashing text. It is a good idea to dynamically turn off animation based on canvas support. I recommend using the excellent Modernizr to do this.
因为excanvas是采用VML实现的,没有硬件加速功能,所以动画会显示断断续续,并且文字会出现闪烁,因此,如果浏览器不支持canvas的话,最好把动画关闭了。