Laravel - Bootstrap Javascript 与 Chart.js 的冲突答案

【问题标题】：Laravel - Bootstrap Javascript's conflict with Chart.jsLaravel - Bootstrap Javascript 与 Chart.js 的冲突
【发布时间】：2018-01-11 20:36:19
【问题描述】：

有人经历过吗？

Bootstrap 的Javascript（用于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 退出 Bootstrap 的javascript 的script 标签时，图表显示完全没有问题。但是我的modal 和其他animations 现在不起作用。

不知何故，我希望它们都工作，因为我需要它们。

【问题讨论】：

标签： javascript laravel chart.js

【解决方案1】：

这可能是我遇到过的最令人沮丧的（错误/功能/问题），让我被困了几天，但因为我的老板不接受拒绝，我讨厌放弃，我终于设法解决它。答案让我想到了一些我从不知道的 html 和 javascript：

答案：

在您的 html 文件的 <head></head> 中，您需要将引导调用的方式更改为 app.js：

<script src="{{ asset('js/app.js') }}" defer></script>

到这里：

<script src="{{ asset('js/app.js') }}"></script>

注意缺少的defer 标签。

解释：

您可能想知道，defer 标签有什么作用？并回答我给你这个小sn-p：

<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 标签并不会破坏引导程序中的任何内容，所以我不知道为什么它甚至还有一个 defer 标签。

我也不太清楚为什么这对 chart.js 来说是个问题，如果有人知道我很想听。

【讨论】：

【解决方案2】：

删除@TDM 谈到的defer 属性后，我遇到了同样的问题。我通过添加一个 DOMContentLoaded 事件监听器解决了这个问题。

document.addEventListener("DOMContentLoaded", function () {
    new Chart(ctx, {...});
});

【讨论】：

【解决方案3】：

有同样的问题，但是删除 defer 属性使其他元素无法在我的 laravel 应用程序中工作。所以我允许延迟 app.js 脚本，并使用@jakub 建议的波纹管在 dom 元素之后加载它。

document.addEventListener("DOMContentLoaded", 
    function () {
        new Chart(...);
    }
);

【讨论】：