如何通过 npm 在 laravel 6 上安装 chartjs

【问题标题】：How to install chartjs on laravel 6 via npm如何通过 npm 在 laravel 6 上安装 chartjs
【发布时间】：2021-08-07 16:13:19
【问题描述】：

我想问一下如何安装chartjs@2.9.4并将其与我的laravel应用程序集成。

我现在使用 cdn 链接，但以后它不会成为我的选择。

使用的cdn链接：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>

我试过的方法：

安装 chartjs

npm i chart.js@2.9.4

在 webpack.mix.js 中添加这一行：

mix.copy('node_modules/chart.js/dist/chart.js', 'public/chart.js/chart.js');

然后从命令行运行：

npm run dev

在您想要图表的刀片中：

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

【问题讨论】：

你尝试的方法有什么问题？有什么错误吗？要正确回答这个问题，我们必须更多地了解您的环境。我认为这在很大程度上取决于您的前端构建过程。

标签： javascript laravel npm chart.js laravel-charts

【解决方案1】：

安装包：

npm install chart.js

创建一个类似/resources/js/mychart.js的文件：

import Chart from 'chart.js/auto';

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    // ...
});

在您的/resources/js/app.js 中，在顶部添加以下内容：

import './mychart.js';

现在运行你的构建，将你的 JavaScript 编译成一个文件。

npm run dev

Laravel Mix，已经有一行用于编译 app.js 文件。

现在，每当您引用 /public/js/app.js 时，您的图表也会包含在其中。

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

如果您想要一个单独的文件，请将您的 webpack.mix.js 文件更改为：

mix.js('/resources/js/chart.js', 'public/js');

记得从 /resources/js/app.js 文件中的导入中删除它。

【讨论】：