Question

我想使用npm install在我的Laravel项目上顺利安装chartjs，为webpack添加配置，并在我的索引页面上看到一些chartjs示例。

我的第一次尝试是在浏览器上出现此错误，也许我没有正确配置Webpack。

Uncaught ReferenceError: Chart is not defined
    at (index):134

所以我复制并粘贴了我在chartjs doc集成中发现的这个要求：

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

我在npm run dev上遇到此错误：

ERROR in ./resources/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/sa/laravelproject/resources/js/app.js: Unexpected token (37:37)

  35 | 
  36 | require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
> 37 |     var myChart = new Chart(ctx, {...});
     |                                      ^
  38 | });

Answer 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拿来。

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

Answer 2

从命令行运行：

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 3

我将使用此库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 4

您可以像这样在 Chart 中注册一个全局 app.js 变量：

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

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

Answer 5

您将遇到的问题是因为您在加载dom之前尝试使用ChartJS。要解决此问题，您只需要在此回调中包装代码即可。 https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

<script>
    document.addEventListener('DOMContentLoaded', () => {
      // your Chart code here ex: new Chart
    });
</script>

如何在Laravel上安装chartjs？

5 个答案: