有没有人经历过这个？ Bootstrap的Javascript(对于模态,手风琴和其他动画)与我的Chart.js有冲突. 这是cdn链接,我使用了缩小版. (Chart.min.js) 如果这有帮助,我将显示我的脚本图表： script src="{
Bootstrap的Javascript(对于模态,手风琴和其他动画)与我的Chart.js有冲突.
这是cdn链接,我使用了缩小版. (Chart.min.js)
如果这有帮助,我将显示我的脚本图表：
<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>
这是一个具有默认值(用于测试)的折线图.
图表在瞬间消失,因此.我知道这是因为Bootstrap的javascript.
每当我起飞或注释掉Bootstrap的javascript脚本标签时,图表都显示没有任何问题.但我的模态和其他动画现在不起作用.
我不知怎的想要它们都能工作,因为我需要它们.
这可能是我遇到的最令人沮丧的(错误/特征/问题)让我陷入困境几天,但因为我的老板不接受任何答案而我讨厌放弃,我终于设法解决了它.答案让我想到了一些我从未知道的html和javascript：答案：
在< head>< / head>中您的html文件需要更改引导程序调用它的app.js的方式：
<script src="{{ asset('js/app.js') }}" defer></script>
对此：
<script src="{{ asset('js/app.js') }}"></script>
请注意丢失的延迟标记.
说明：
您可能想知道,延迟标签有什么作用？并回答我给你这个小片段：
<html>
<body>
<script src="https://www.w3schools.com/tags/demo_defer.js" defer></script>
<p id="p1">
Hello World!
</p>
</body>
</html>
它只是阻止浏览器加载/运行脚本,直到完全解析该站点.在上面的示例中,我们调用的脚本包含以下代码：
alert(document.getElementById("p1").firstChild.nodeValue);
基本上告诉您的浏览器发送一个警告,其中包含p标签内的任何内容.如果没有defer标记,脚本将失败,因为它将在浏览器解析p标记之前运行,而javascript只能与浏览器已解析的内容一起使用.
据我所知,删除defer标签不会破坏bootstrap中的任何内容,所以我不知道为什么它甚至有一个defer标签.
我也不太清楚为什么这会成为chart.js的问题,如果有人知道我会喜欢听到它.