如何在 Laravel 中安装 Chart.js？（“未捕获的 ReferenceError：未定义图表”）答案

【问题标题】：How to install Chart.js in Laravel? ("Uncaught ReferenceError: Chart is not defined")如何在 Laravel 中安装 Chart.js？（“未捕获的 ReferenceError：未定义图表”）
【发布时间】：2021-07-14 10:18:22
【问题描述】：

我不知道，我浪费了多少时间来寻找这个问题的解决方案。我想在我的 Laravel 项目中使用 Chart.js，所以我按照here 描述的说明进行操作。

composer require fx3costa/laravelchartjs（已运行）
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class（添加在正确的位置）
npm i chart.js（用于安装chart.js）
在我的控制器和刀片中，我使用了示例 1 中的代码（折线图/雷达图）

之后出现错误：Uncaught ReferenceError: Chart is not defined。在那之前和之后，我尝试了不同的解决方案，但总是有问题，我认为这个应该对我有用。我可能错过了一些明显但非常重要的东西。

你有什么想法吗？使用npm 安装后，我应该在webpack.mix.js 或bootstrap.js 文件中添加一些内容吗？

编辑：

如果我将<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> 放在刀片的head 部分，一切正常，但我使用laravel-mix 来使用语言环境文件而不是链接。

【问题讨论】：

在 bootstrap.js 中你应该添加这一行：window.chart = require('chart.js');
@work service 是的，我之前试过，但没有解决问题。

标签： laravel npm chart.js laravel-mix

【解决方案1】：

Chart.js 必须在之前内容加载，以便在任何Controller 中使用它。我正在加载我的 laravel-mix 变量 after HTML 内容（因为它包含一些大型库，如 jQuery 等），所以这就是它无法工作的原因。

解决方案：

在我的文档末尾，我还有我以前的脚本

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

但是现在我用一行代码在resources/js目录下新建了一个loadBefore.js文件：

require('chart.js/dist/chart.js');

如果有任何理由将任何其他 javascript 代码放在那里，很容易放在那里。

我还将这个文件添加到webpack.mix.js，如下所示：

mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();

当然，最后我将此脚本添加到刀片的头部：

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

现在一切正常，我正在使用我的 Laravel 文件中已经存在的 chart.js 文件。我不知道，有人知道更简单的解决方案，所以现在我接受我的回答，但我仍然愿意接受建议。

【讨论】：

【解决方案2】：

为什么你不复制的内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

在您本地的文件中，例如：/public/js/chart.js 并将其加载到头部

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

【讨论】：