javascript - Chartjs - Laravel 5.8 未定义未捕获的参考错误图表
问题描述
在我的 laravel 项目中,我使用的是 adminlte 仪表板。我也在 adminlte 仪表板中使用 chartjs。Uncaught ReferenceError: Chart is not defined发生错误。我尝试了很多解决方案,但错误仍然相同。发生了什么问题以及如何解决这个问题?
我在 chartjs 文档中添加了代码示例:但这不起作用;
<canvas id="timechart" width="800px" height="400px"></canvas>
<script>
var ctx = document.getElementById('timechart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
在主布局中添加 chartjs:
<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script>
解决方案
您应该将 import js 放在从 js 调用的函数的顶部。所以最简单的方法是放在<script type="text/javascript" src="{{ asset('js/Chart.js') }}"></script>
标题中。或者放在页脚但在上面new Chart(ctx,{})
。以下是示例工作代码段:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="timechart" width="800px" height="400px"></canvas>
<script>
var ctx = document.getElementById('timechart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
推荐阅读
- android - onDraw 函数被调用两次?
- linux - 如何显示不重复的值
- excel - 如何清除A列以外的行内容?
- javascript - 面向对象的 Javascript 在嵌入式数组中创建格式错误的数据
- python - Apache + Django + wsgi.py。无法访问网站
- hibernate - @OrderBy 注释中的 JPA/Hibernate CASE 抛出异常:意外令牌:CASE
- excel - 当具有日期输入的单元格计数达到特定限制时,禁用某个范围的双击事件
- java - 在插入 ArrayList 之前检查 ArrayList 中的对象是否具有相同的 ID 值
- android - 单个片段上的 Android 沉浸式全屏模式
- android - OpenGL ES 1.0 GLU Ortho Projection 不渲染基本三角形