如何在Laravel中安装Chart.js？

Question

我想在我的Laravel项目中安装Chart.js。使用npm安装，一个网页包的配置，并通过一些Chart.js示例查看我的索引页面。在我第一次尝试时，我在浏览器中遇到了这个错误。也许我没有正确配置网页包？

未捕获引用错误：在（索引）134处未定义图表

所以我复制并粘贴了我在Chart.js doc integration上找到的这个require。

require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

我在npm run dev上遇到这个错误。

./resources/js/app.js模块构建失败（来自./node_modules/babel loader/lib/index.js）：语法错误：/home/sa/laravelproject/resources/js/app.js：意外令牌（37:37）

35 | 36 | require（['path/to/chartjs/dist/Chart.min.js'，函数（Chart）{

37 | var myChart=新图表（ctx，{…}）；|^38 | });

Answer 1

您可以在app.js中注册全局Chart变量，如下所示：

// Chart JS
import Chart from 'chart.js/auto';
window.Chart = Chart;

然后，您可以在视图或其他JS文件中使用new Chart（..）

Answer 2

我有一些问题。

首先，我不能通过NPM带来图书馆。我安装了它，然后执行“npm run dev”。但当我在应用程序中调用它时，它会说

1:2573 Uncaught ReferenceError: Chart is not defined
    at 1:2573

如果我从CDN调用它，它会与VUE或Bootstrap的某些东西冲突。因为它不起作用。除了我删除了app.blade.php行中的“延迟”字：

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

但同样，CDN只调用Charts.Js。不能从NPM带来。

希望有人也有同样的问题。非常感谢。赫尔南。

Answer 3

从命令行运行此命令：

npm install chart.js

在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>
<canvas id="myChart" width="500" height="200"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, { 
  ...
  }
</script>