如何通过 npm 在 laravel 6 上安装 chartjs
How to install chartjs on laravel 6 via npm
我想问一下如何安装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
- 在 blade 中,您希望图表位于:
<script src="{{ asset('chart.js/chart.js') }}"></script>
安装包:
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 混合,已经有编译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
文件的导入中删除。
我想问一下如何安装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
- 在 blade 中,您希望图表位于:
<script src="{{ asset('chart.js/chart.js') }}"></script>
安装包:
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 混合,已经有编译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
文件的导入中删除。