ChartJS出现又消失

Question

所以我在Bootstrap4和Laravel项目中使用ChartJS。代码没有问题(见下文)。每次我刷新页面时，图表都会显示一毫秒，然后消失。

                     <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>

Answer 1

我也有同样的问题。问题来自于延迟加载布局中的app.js。

<script src="{{ asset('js/app.js') }}" defer></script>

它是在my和Vue实例化创建之后加载的。我想这就是图表消失的原因。

我希望它能帮助一些人。

Answer 2

对我有效的解决方案是：

从app.js开始

• Remove异步和延迟

<script async src="{{ asset('js/app.js') }}" defer></script>