时间戳

首页 > 解决方案 > 如何在 Laravel 中安装 Chart.js？（“未捕获的 ReferenceError：未定义图表”）

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

问题描述

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

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

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

你有什么想法吗？安装后我应该添加一些东西webpack.mix.js或bootstrap.js文件npm吗？

编辑：

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

标签： laravelnpmchart.jslaravel-mix

解决方案

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

解决方案：

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

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

但是现在我用一行代码loadBefore.js在目录中创建了一个新文件：resources/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文件。我不知道，有人知道更简单的解决方案，所以现在我接受我的回答，但我仍然愿意接受建议。

推荐阅读