如何在 Laravel 中安装 Chart.js？

Question

我想在我的 Laravel 项目中安装 Chart.js。使用 npm install（Webpack 的配置），并查看我的索引页和一些 Chart.js 示例。在我第一次尝试时，我在浏览器中收到此错误。也许我没有正确配置 webpack？

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

因此，我复制并粘贴了在 Chart.js 文档集成中找到的此要求。

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 | 35 36 | 36 需要（['路径/到/chartjs/dist/Chart.min.js']，函数（图表）{

37 | 37 var myChart = new Chart(ctx, {...}); | ^ 38 | });

Answer 1

从命令行运行：

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>