javascript - 页面加载器淡出后无法显示图表.js

Question

加载时我使用 MaterializeCSS 框架的预加载器屏幕。但加载时。我使用 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/