Laravel – Bootstrap Javascript与Chart.js的冲突

有没有人经历过这个？

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的问题,如果有人知道我会喜欢听到它.

Laravel – Bootstrap Javascript与Chart.js的冲突

解决方法

相关推荐