Question

我在加载时使用MaterialiseCSS 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元素，初始化图表然后淡入。

如果在调用responsive时画布元素（或有时设置为new Chart的父元素）没有大小，则高度和宽度将被视为0，并且图表不会被明显绘制。< / p>

小提琴 - http://jsfiddle.net/1jd9bmgo/

fadeOut后的页面加载器无法显示chart.js

1 个答案: