Jan*_*ose 5 javascript laravel chart.js
有没有人经历过这个？
Bootstrap Javascript(For modals,accordion和其他动画)对我有冲突Chart.js.
这是cdn链接,我使用了缩小版本.(Chart.min.js)
如果这有帮助,我将展示我script的图表:
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
responsive: true,
type:'line',
data:{
labels:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets:[{
label:'Sales',
data:[
500,
304,
601,
670,
912,
612,
500
],
backgroundColor: 'rgba(129, 207, 238, 1)',
borderWidth: 1,
borderColor: '#000',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options:{
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
title:{
display: true,
text: 'Weekly Sales',
fontSize: 25
},
legend:{
position:'bottom',
display:false,
},
layout:{
padding: 50,
}
}
});
</script>
它是一个line chart具有默认值(用于测试).图表在瞬间消失,因此.我知道这是因为Bootstrap的javascript.
每当我起飞或comment取出scriptBootstrap的标签时javascript,图表都显示没有任何问题.但是我modal和其他animations人现在都行不通.
我不知怎的想要它们都能工作,因为我需要它们.
这可能是我遇到过的最令人沮丧的（错误/功能/问题），并让我陷入困境几天，但因为我的老板不接受拒绝，而且我讨厌放弃，所以我终于设法解决了它。答案让我想起了一些我从来不知道的 html 和 javascript：
在<head></head>html 文件中，您需要更改引导程序调用的方式app.js：
<script src="{{ asset('js/app.js') }}" defer></script>
对此：
<script src="{{ asset('js/app.js') }}"></script>
请注意缺少的defer标签。
您可能想知道，标签有什么defer作用？为了回答这个问题，我给你这个小片段：
<script src="{{ asset('js/app.js') }}" defer></script>
它只是停止浏览器加载/运行脚本，直到站点被完全解析。在上面的示例中，我们调用的脚本包含以下代码：
alert(document.getElementById("p1").firstChild.nodeValue);
基本上告诉您的浏览器发送包含 p 标签内的内容的警报。如果没有该defer标签，脚本将会失败，因为它将在浏览器解析 p 标签之前运行，并且 javascript 只能处理浏览器已经解析的内容。
据我发现，删除 defer 标签不会破坏 bootstrap 中的任何内容，所以我不知道为什么它甚至有一个 defer 标签。
我也不太清楚为什么这对 Chart.js 来说是一个问题，如果有人知道我很想听听。