如何在 Laravel 中安装 Chart.js?

问题描述 投票:0回答:6

我想在我的 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 | });

laravel laravel-5 chart.js laravel-6
6个回答
11
投票

从命令行运行此命令:

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>

3
投票

您可以在

Chart
中注册一个全局
app.js
变量,如下所示:

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

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

new Chart(....)


1
投票

我遇到了一些问题。

首先我无法通过 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 带来它。

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


1
投票

@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');


0
投票

我会使用这个库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


0
投票

希望这对某人有价值。将 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
© www.soinside.com 2019 - 2024. All rights reserved.