Laravel-Bootstrap Javascript与Chart.js的冲突 [英] Laravel - Bootstrap Javascript's conflict with Chart.js
问题描述
有人经历过吗?
Bootstrap的 Javascript (用于 modals ，手风琴和其他动画)与我的 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)
如果有帮助，我将显示图表的脚本:
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.
每当我起飞时，或者在Bootstrap的 javascript 的 script 标记中标记 comment 时，该图表都不会出现问题.但是我的 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屋！
