ChartJS出现并消失 [英] ChartJS shows up and disappears

问题描述

所以我将ChartJS与Bootstrap 4和Laravel Project一起使用。
代码很好（请参阅下文）。每次刷新页面时，图表都会显示约一毫秒，然后消失。

So I am using ChartJS alongside a Bootstrap 4 and Laravel Project. The code is fine(see below). Every time I refresh the page, the chart shows up for like a millisecond and goes away.

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

I had the same issue. The problem was from the defer loading of the app.js in the layout.

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

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

It was loading after my and a Vue instanciation was created. I think this is why the chart was disappearing.

我希望它对某人有帮助。

I hope it helps someone.

这篇关于ChartJS出现并消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！