Laravel - Bootstrap Javascript 与 Chart.js 的冲突 [英] Laravel - Bootstrap Javascript's conflict with Chart.js
问题描述
有人经历过吗?
Bootstrap 的 Javascript(对于 modals、accordion 和其他动画)与我的 Chart.js 有冲突.
Bootstrap's Javascript (For modals, accordion, and other animations) has conflict for my Chart.js.
这是 cdn 链接，我使用的是缩小版.(Chart.min.js)
Here's the cdn link, I used the minified version. (Chart.min.js)
如果这有帮助，我会为图表显示我的 script:
If this helps, I'll show my script for the chart:
<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.
It's a line chart that has a default value (for testing).
The chart disappears after a split second, and because of this. I knew that it was because of the Bootstrap's javascript.
每当我起飞，或 comment 为 Bootstrap 的 javascript 标记 script 时，图表显示完全没有问题.但我的 modal 和其他 animations 现在不起作用.
Whenever I take off, or comment out the script tag for the Bootstrap's javascript, the chart shows with no problem at all. But my modal and other animations doesn't work now.
不知何故，我希望它们都能工作，因为我都需要它们.
I somehow want both of them to work, because I need them both.
推荐答案
这可能是我遇到过的最令人沮丧的(错误/功能/问题)，让我卡了几天，但因为我的老板没有不接受答案，我讨厌放弃，我终于设法解决了.答案让我想到了一些我从不知道的 html 和 javascript:
This may be the most frustrating (bug/feature/problem) I have ever come accross and got me stuck for a few days, but because my boss doesn't take no for an answer and I hate giving up, I finally managed to solve it. The answer thought me something about html and javascript I never knew:
在 html 文件的 <head></head> 中，您需要将引导调用的方式更改为 app.js:
In the <head></head> of your html file you need to change the way bootstrap call's it's app.js from this:
<script src="{{ asset('js/app.js') }}" defer></script>
到这里:
<script src="{{ asset('js/app.js') }}"></script>
注意缺少的 defer 标签.
您可能想知道，defer 标签有什么作用?为了回答这个问题，我给你这个小片段:
You may be wondering, what does the defer tag do? And to answer that I give you this small snippet:
<html>
<body>
<script src="https://www.w3schools.com/tags/demo_defer.js" defer></script>
<p id="p1">
Hello World!
</p>
</body>
</html>它只是阻止浏览器加载/运行脚本，直到站点被完全解析.在上面的例子中，我们调用的脚本包含以下代码:
It simply stops the browser from loading/running the script until the site has been completely parsed. In the above example the script we call contains the following code:
alert(document.getElementById("p1").firstChild.nodeValue);
基本上告诉您的浏览器发送一个警报，其中包含 p 标签内的任何内容.如果没有 defer 标签，脚本会失败，因为它会在浏览器解析 p 标签之前运行，而 javascript 只能处理浏览器已经解析的内容.
Basically telling your browser to send an alert with the contents of whatever is inside the p tags. Without the defer tag, the script would fail because it would be run before the p tags get parsed by the browser, and javascript can only work with what the browser already parsed.
据我发现，删除 defer 标签并不会破坏引导程序中的任何内容，所以我不知道为什么它甚至还有一个 defer 标签.
As far as I found, removing the defer tag doesn't break anything in bootstrap, so I don't know why it even has a defer tag.
我也不太清楚为什么这对 chart.js 来说是个问题，如果有人知道我很想听听.
I'm also not quite sure why this would be a problem for chart.js, If anyone knows I would love to hear it.
这篇关于Laravel - Bootstrap Javascript 与 Chart.js 的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
