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

【问题标题】：Chartjs - uncaught reference error chart is not defined Laravel 5.8Chartjs - Laravel 5.8 未定义未捕获的参考错误图表
【发布时间】：2019-12-15 14:52:18
【问题描述】：

在我的 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：

&lt;script type="text/javascript" src="{{ asset('js/Chart.js') }}"&gt;&lt;/script&gt;

【问题讨论】：

你在哪里导入 ChartJS？
<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script> 我在主布局中添加了这样的内容

标签： javascript php html css laravel

【解决方案1】：

您应该将导入 js 放在从 js 调用的函数的顶部。所以最简单的方法是将<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script> 放在标题中。或在new Chart(ctx,{}) 上方添加页脚。下面是示例工作 sn-p 代码：

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

【讨论】：