ChartJS 出现和消失答案

【问题标题】：ChartJS shows up and disappearsChartJS 出现和消失
【发布时间】：2018-12-21 12:16:58
【问题描述】：

所以我将 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>

【问题讨论】：

当我测试你的代码时，似乎没有错误。 jsfiddle.net/eb7u9kjL你还有其他代码在执行吗？
我也认为其他一些代码可能具有相同的 ID，控制台是否会返回任何错误？
奇怪...没有其他相同ID的代码...这是一个新项目。
你能评论控制台回溯吗？

标签： javascript css twitter-bootstrap chart.js

【解决方案1】：

我遇到了同样的问题。问题在于布局中 app.js 的延迟加载。

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

它是在我创建 Vue 实例之后加载的。我认为这就是图表消失的原因。

我希望它对某人有所帮助。

【讨论】：

【解决方案2】：

对我有用的解决方案：

从 app.js 中移除异步和延迟

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

【讨论】：