我想使用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 | });
答案 0 :(得分: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 :(得分: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>
答案 2 :(得分: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
答案 3 :(得分:0)
您可以像这样在 Chart
中注册一个全局 app.js
变量:
// Chart JS
import Chart from 'chart.js/auto';
window.Chart = Chart;
然后您可以在视图或其他 JS 文件中使用 new Chart(....)
答案 4 :(得分:-1)
您将遇到的问题是因为您在加载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>