所以我使用ChartJS和Bootstrap 4以及Laravel项目。代码很好(见下文)。每次刷新页面时,图表都显示为毫秒,然后消失。
<div class="col-md-6">
<div>
<canvas id="pie-chart" style="width:100%;"></canvas>
<!-- Pie Chart -->
<script>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["College Project", "Mind Map", "Designers Club"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
data: [2478,5267,734]
}]
},
options: {
title: {
display: true,
text: 'Tasks Division'
}
}
});
</script>
</div>
</div>
我遇到过同样的问题。问题来自于在布局中延迟加载app.js.
<script src="{{ asset('js/app.js') }}" defer></script>
它是在我和Vue instanciation创建之后加载的。我想这就是图表消失的原因。
我希望它对某人有帮助。