Chartjs - Laravel 5.8 未定义未捕获的参考错误图表

Question

在我的 laravel 项目中，我使用的是 adminlte 仪表板。我也在 adminlte 仪表板中使用 chartjs。Uncaught ReferenceError: Chart is not defined发生错误。我尝试了很多解决方案，但错误仍然相同。发生了什么问题以及如何解决这个问题？

我在 chartjs 文档中添加了代码示例：但这不起作用；

                <canvas id="timechart" width="800px" height="400px"></canvas>

                <script>

                    var ctx = document.getElementById('timechart').getContext('2d');

                        var chart = new Chart(ctx, {

                            // The type of chart we want to create

                            type: 'line',

                            // The data for our dataset

                            data: {

                                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

                                datasets: [{

                                    label: 'My First dataset',

                                    backgroundColor: 'rgb(255, 99, 132)',

                                    borderColor: 'rgb(255, 99, 132)',

                                    data: [0, 10, 5, 2, 20, 30, 45]

                                }]

                            },

                            // Configuration options go here

                            options: {}

                        });

                </script>

在主布局中添加 chartjs：

<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script>

Answer 1

您应该将 import js 放在从 js 调用的函数的顶部。所以最简单的方法是放在<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script>标题中。或者放在页脚但在上面new Chart(ctx,{})。以下是示例工作代码段：<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script><canvas id="timechart" width="800px" height="400px"></canvas>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ctx = document.getElementById('timechart').getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var chart = new Chart(ctx, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // The type of chart we want to create&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // The data for our dataset&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'My First dataset',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'rgb(255, 99, 132)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: 'rgb(255, 99, 132)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [0, 10, 5, 2, 20, 30, 45]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Configuration options go here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </script>