search

youngwind / blog

梁少峰的个人博客
4.66k stars 385 forks source link

ie8 chartjs兼容性解决方案 #29

Open youngwind opened 8 years ago

youngwind commented 8 years ago

原因

项目中要用到数据可视化，我选择了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的话，最好把动画关闭了。