页面加载器淡出后无法显示 chart.js

Question

加载时我使用了 MaterializeCSS Framework 的预加载器屏幕。但是加载的时候。我使用 Chart.js 创建的图表在预加载器淡出后不显示。有人可以从 jsFiddle 查看我的代码来解决问题吗？

//Preloader
$(window).load(function() {
});
function show() {
 $('#preloader').fadeOut(500);
 $('#canvas').delay(500).fadeIn();
};

setTimeout(show, 3000);

//Chart.js
var radarChartData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65,59,90,81,56,55,40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28,48,40,19,96,27,100]
        }
    ]
};
window.onload = function(){
    window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
        responsive: true
    });
}

<script src="http://materializecss.com/js/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="valign-wrapper" id="preloader" style="height: 100%;">
    <div class="valign center-align" style="width: 100%;">
        <div class="preloader-wrapper big active" style="width: 100px; height: 100px">
            <div class="spinner-layer spinner-blue">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-red">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-yellow">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
            <div class="spinner-layer spinner-green">
                <div class="circle-clipper left"><div class="circle"></div></div>
                <div class="gap-patch"><div class="circle"></div></div>
                <div class="circle-clipper right"><div class="circle"></div></div>
            </div>
        </div>
        <p>Wait a minute...</p>
    </div>
</div>
<div id="chartcanvas" style="width:30%;">
    <canvas id="canvas" height="450" width="450" style="display: none"></canvas>
</div>

Answer 1

将图表初始化移动到 fadeIn 回调中

$('#canvas').delay(500).fadeIn(function() {
    window.myRadar = ...

如果您还需要在图表中淡入淡出，请先显示不透明度为 0（或隐藏可见性）的 canvas 元素，初始化图表然后淡入。

如果调用 new Chart 时 canvas 元素（或有时是父元素，当设置 responsive 时）没有大小，则高度和宽度取为 0 并且图表画得不明显。

Fiddle - http://jsfiddle.net/1jd9bmgo/

页面加载器淡出后无法显示 chart.js

Can't display chart.js after fadeOut the pageloader

html

javascript

jquery

materialize

chart.js