Laravel - Bootstrap Javascript 与 Chart.js 的冲突

2022-01-22 00:00:00 javascript laravel 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.

相关文章