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

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>

Answer 2

您可以在

Chart

中注册一个全局

app.js

变量，如下所示：

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

然后你可以在视图或其他 JS 文件中使用它

new Chart(....)

Answer 3

我遇到了一些问题。

首先我无法通过 NPM 引入该库。我安装了它，然后执行“npm run dev”。但当我在应用程序中调用它时，它会说

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

如果我从 CDN 调用它，它会与 VUE 或 Bootstrap 的某些内容冲突。因为它不起作用。除了我从 app.blade.php 的行中删除“defer”一词：

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

但同样，仅通过 CDN 调用 Charts.Js。无法从 NPM 带来它。

希望有人遇到同样的问题。谢谢。 埃尔南。

Answer 4

@Magmatic 的答案很接近。

对于较新的版本，例如我使用 v4.x。稍微修改一下：

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

添加另一个隐藏错误通知：

mix.copy('node_modules/chart.js/dist/chart.umd.js.map', 'public/js/chart.umd.js.map'); mix.copy('node_modules/chart.js/dist/helpers.js.map', 'public/js/helpers.segment.js.map');

Answer 5

我会使用这个库https://github.com/ConsoleTVs/Charts。

奔跑...

composer require consoletvs/charts

然后发布配置文件：

php artisan vendor:publish --tag=charts_config

在 config/charts.php 中，指定您的图表类型：

'default_library' => 'Chartjs',

安装：

npm i chart.js

从那里按照创建图表的说明进行操作。

https://charts.erik.cat/create_charts.html#create-a-chart-class

Answer 6

希望这对某人有价值。将 livewire v3 与 AlpineJS 结合使用，最终的技巧是：

1. 将以下内容添加到resources/js/bootstrap.js

   import Chart from 'chart.js/auto';

   window.Chart = Chart;

2. 在 Blade 中包含脚本，但最重要的是添加 type="module" 来打开脚本标签：

@push('scripts')
    <script type="module">
        var ctx = document.getElementById('testChart');
        var testChart = new Chart(ctx, {
            type: 'bar',
            data: {!! json_encode($data) !!},
        });
    </script>
@endpush