ie8 chartjs兼容性解决方案

@youngwind 2016-02-27 04:03:01发表于 youngwind/blog 兼容性

原因

项目中要用到数据可视化,我选择了Chart.js,确实挺好用的。但是因为Chart.js是用canvas实现的,IE8及以下不支持canvas。官方给出的解决方案在这里
2016-02-27 11 27 32

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的话,最好把动画关闭了。